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/