jQuery Validate plugin doesn't remove error messages

Question

I am "again" asking about jQuery Validate plugin...

Now, my issue is that the error labels don't hide until I click the submit button one time and a second click is needed to submit the form, any idea? what I need is the error label hide if my input text is valid.

jQuery:

$("#form").validate({
            rules: {
                "name": {
                    required: true,
                    minlength: 3
                },
                "phone":{
                    required:true,
                    digits:true,
                    minlength: 9
                },
               "email":{
                    required: true
                },
                "storageoptions":{
                    required: true
                },
                "quantity":{
                    required:true,
                    digits:true
                }
            },
            messages: {
                "name": {
                    required: "Please enter a name"
                },
                "phone":{
                    required: "Required field"
                },
                "email":{
                    required: "Enter a valid email"
                },
                "storageoptions":{
                    required: "Please select an option"
                },
                "quantity":{
                    required: "This Field required"
                }               
            },
            errorPlacement: function(error, element) {
               error.insertBefore(element);
            },
            submitHandler: function (form) {    

               $.ajax({
                    type: 'POST',
                    data: $(form).serialize(),
                    url: 'file.php',
                    success: function () {
                        form.reset();
                        $('#submit').hide();
                        $('#success-line').show().fadeOut(7000, function(){
                            $('#submit').show("slow");
                        });
                    }
                });
                return false;
            }


        });

and here is my demo: http://jsfiddle.net/ujDC3/

Answer 1

By default, the jQuery Validate plugin will automatically clear out error messages on blur and keyup events. However, your implementation was broken by invalid HTML.

There is no such thing as type="input":

<input type="input" name="name" id="name" class="longinput" />

Change them all to type="text":

<input type="text" name="name" id="name" class="longinput" />

Now it's working as expected: http://jsfiddle.net/Y9RFt/

Answer 2

The submitHandler function is ONLY hit after validation has passed, therefore you are hitting the submit button to pass validation, then you have to hit it again to finally send it.

I'd use:

form.submit() 

instead.

References:

Jquery Validate Plugin Prevent Double Submit On Validation

jquery validation is forcing a double click on submit for form that submits to thickbox