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 cod

Answer 1

.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/

Answer 2

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>