jQuery form validate not working

Question

I've spent hours on this and I have no idea why this jquery validate() doesn't work. I finally broke it down to minimum and it still doesn't work. This is the actuall code:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>

    <script>

        $(document).on("click", "#submit", function() {

            $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

            return false;
         });

    </script>

</head>
<body>

    <form id="form">
        <input type="text" value="" name="input" id="input" />
    </form>
    <a href="#" id="submit">submit</a>

</body>
</html>

Am I missing something obvious here? I get no errors and nothing happens when "submit" is clicked.

UPDATE: I have moved the validate() outside the "click" event into document "ready" event and now it fires off when the document is loaded outputting message in the console "nothing selected, can't validate, returning nothing" This is not how I want it to work obviously, so how do I attach it to the click event?

UPDATE 2: Thanks to @NXT i finally make the validation run, however "submitHandler" is still not working and I need to use it to make Ajax call, because the form must be submitted without a page reload.

I believe that .validate is not supposed to go in a callback. Try moving it outside of the callback and wrapping it in $(document).ready — Explosion Pills
– Explosion Pills, Commented Jan 28, 2013 at 13:53
@ExplosionPills I guess that makes sense, however how do I trigger the validation when "submit" is pressed? The submit button in this case is a tag, not the actual form submit. — Caballero
– Caballero, Commented Jan 28, 2013 at 13:55
@RoryMcCrossan I deleted it because that's not the problem. He's binding to the submit button using delegation, so it should trigger even though the button is loaded after the fact — Explosion Pills
– Explosion Pills, Commented Jan 28, 2013 at 13:56
@Caballero I'm not 100% sure how .validate works, but I assume that is handled automatically (i.e. it does the validation checking whenever the form submit event is triggered by anything). — Explosion Pills
– Explosion Pills, Commented Jan 28, 2013 at 13:57

NXT · Accepted Answer · 2013-01-28 14:41:38Z

7

Did you intentionally put the submit button outside the form? I modified it, to submit the form when clicked. It works now - the validation message appears, and the alert message too (when you submit the form with some content). Either use the code parts below, or try it online - http://jsfiddle.net/Vcmfs/

Head:

<script>
    $(function(){
        $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

        $("#submit").click(function(){
            $("#form").submit();
            return false;
        });
    });
</script>

Body:

<form id="form">
    <input type="text" value="" name="input" id="input" />
</form>
<a href="#" id="submit">submit</a>

edited Jan 28, 2013 at 14:41

answered Jan 28, 2013 at 14:12

NXT

2,0111 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Caballero Over a year ago

Thanks, it seems to make the validation work now, however the submitHandler does not fire, which is essential for my script to work.

NXT Over a year ago

@Caballero It should work when validation is successful, just write anything in the box and it should fire :)

Caballero Over a year ago

Yes I did exactly that, still submitHandler is not responding. This is beyond frustrating.

NXT Over a year ago

@Caballero I added a link to jsFiddle code, I simply copied the parts from above and they work for me in Firefox, IE 10 and Chrome.

Caballero Over a year ago

Thanks, this time it worked. Just had to change .valid() to .submit()

|

jrummell · Accepted Answer · 2013-01-28 14:12:20Z

6

.validate() doesn't actually perform the validation, it configures the form for validation.

If you change your submit link to a submit button <input type='submit' value='Submit'/>, it will work as expected.

Another option is to call .valid() in your link click handler, which will trigger validation.

See this fiddle for a working example: http://jsfiddle.net/v5HQr/1/

edited Jan 28, 2013 at 14:12

answered Jan 28, 2013 at 14:05

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

1 Comment

Caballero Over a year ago

Thanks, your answer did nudge me in the right direction. I still can't make submitHandler to do anything though...

Collectives™ on Stack Overflow

jQuery form validate not working

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related