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/

By default, the plugin should be validating on every keystroke, but in [your jsFiddle](http://jsfiddle.net/ujDC3/), it's not working because your text inputs are improperly coded as `type="input"`. — Sparky, Apr 02 '13 at 23:42
@karthikr, no, his jsFiddle is not working properly. An error message on a `required` field should automatically clear out as soon as one character is typed to satisfy the rule. — Sparky, Apr 03 '13 at 00:10

Sparky · Accepted Answer · 2013-04-02T23:48:47.060

5

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/

edited Apr 02 '13 at 23:48

answered Apr 02 '13 at 23:41

Sparky

98,165
25
199
285

ty so much @Sparky, i didn't code the form i am just validating it. saved my day i didn't see that error. – paoloi Apr 03 '13 at 14:24
@paoloi, HTML is the foundation of the house. First step in any project is to run your HTML through the W3C HTML Validator. – Sparky Apr 03 '13 at 14:35

score -2 · Answer 2 · edited May 23 '17 at 12:31

-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

edited May 23 '17 at 12:31

Community

1
1

answered Apr 02 '13 at 21:41

Mike Legacy

1,056
1
10
24

1

`form.submit()` is what the plugin should already be doing automatically. [Read the documentation](http://docs.jquery.com/Plugins/Validation/validate#toptions)... _"submitHandler: Callback for handling the actual submit when the form is valid. Gets the form as the only argument. **Replaces the default submit.** The right place to submit a form via Ajax after it validated."_ In other words, when used properly, you do not call a `form.submit()`. The problem you've linked to has to do with improperly calling `.validate()` initialization function, but the OP's is caused by invalid HTML. – Sparky Apr 02 '13 at 23:45

jQuery Validate plugin doesn't remove error messages

2 Answers2