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, it's not working because your text inputs are improperly coded as type="input". — Sparky
– Sparky, Commented Apr 2, 2013 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
– Sparky, Commented Apr 3, 2013 at 0:10

Sparky · Accepted Answer · 2013-04-02 23:48:47Z

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 2, 2013 at 23:48

answered Apr 2, 2013 at 23:41

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

2 Comments

paoloi Over a year ago

ty so much @Sparky, i didn't code the form i am just validating it. saved my day i didn't see that error.

Sparky Over a year ago

@paoloi, HTML is the foundation of the house. First step in any project is to run your HTML through the W3C HTML Validator.

Community · Accepted Answer · 2017-05-23 12:31:17Z

-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, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 2, 2013 at 21:41

Mike Legacy

1,0661 gold badge10 silver badges24 bronze badges

1 Comment

Sparky Over a year ago

form.submit() is what the plugin should already be doing automatically. Read the documentation... "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.

Collectives™ on Stack Overflow

jQuery Validate plugin doesn't remove error messages

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related