javascript - Jquery Validator valid() function not working on submit - Stack Overflow

admin管理员组

文章数量:1279174

We have multiple forms within a single page application. Individual forms have their individual save button on which individual form gets validated and if valid (using jquery validator .valid() method) then record gets saved in Database which is working fine.

Problem we are facing here is that when in the last form which is the final submit, when we try to validate all other forms for its validation using .valid() method, it always returns true irrespective of the wrong validations.

$("#submitForm").submit(function(event) {
     $("#educationForm").validate();
     console.log($("#educationForm").valid());

});

Here console also gives true even if the education Form is invalid

Kindly help us with this issue.

Regards, Suvojit

We have multiple forms within a single page application. Individual forms have their individual save button on which individual form gets validated and if valid (using jquery validator .valid() method) then record gets saved in Database which is working fine.

Problem we are facing here is that when in the last form which is the final submit, when we try to validate all other forms for its validation using .valid() method, it always returns true irrespective of the wrong validations.

$("#submitForm").submit(function(event) {
     $("#educationForm").validate();
     console.log($("#educationForm").valid());

});

Here console also gives true even if the education Form is invalid

Kindly help us with this issue.

Regards, Suvojit

• javascript
• jquery
• jquery-validate

Share Improve this question Follow edited Jun 15, 2015 at 14:52 Sparky 98.7k2626 gold badges202202 silver badges290290 bronze badges asked Jun 15, 2015 at 13:40 SuvojitSuvojit 37911 gold badge77 silver badges2323 bronze badges 6

• You should use event.preventDefault() to stop form from submitting – Tushar Commented Jun 15, 2015 at 13:41
• Thats fyn.. I have included that in my code....Its not about form submission but I am getting true even if the education Form is not validated. – Suvojit Commented Jun 15, 2015 at 13:44
• well you can not have forms in forms so not sure how that code is supposed to work... Maybe a basic example that shows how it is being used. – epascarello Commented Jun 15, 2015 at 13:44
• No we are having multiple forms not nested kind off.. – Suvojit Commented Jun 15, 2015 at 13:56
• You are incorrectly calling .validate() from within a .submit() handler. .validate() is only how you'd INITIALIZE the plugin. – Sparky Commented Jun 15, 2015 at 14:43

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

valid() function not working on submit

The .valid() method was designed to programmatically trigger a validation test. When you click "submit", the plugin is automatically doing a validation test, so there's no point in also calling .valid() on the "submit" event.

---

I think you may be misunderstanding the basic usage...

$("#submitForm").submit(function(event) {
     $("#educationForm").validate();            // <- INITIALIZES PLUGIN
     console.log($("#educationForm").valid());  // <- TEST VALIDATION
});

• You would never put .validate() inside of an event handler other than a DOM ready handler. The .validate() method is how the plugin is initialized.

• After it's initialized properly, the plugin automatically captures the click event of the submit button.

By putting it inside of a .submit() handler, you're interfering with the plugin, which is already trying to capture the exact same event.

Put inside of the DOM ready event handler instead...

$(document).ready(function() {

     $("#educationForm").validate();            // <- INITIALIZES PLUGIN

     console.log($("#educationForm").valid());  // <- TEST VALIDATION

});

Working DEMO: http://jsfiddle/2vugwyfe/

OR: http://jsfiddle/2vugwyfe/1/

---

The validation test is automatically triggered by any type="submit" element.

If you need to trigger a validation test by clicking another type of element, then use a custom .click() handler...

$(document).ready(function() {

     $("#educationForm").validate();            // <- INITIALIZES PLUGIN

     $("#button").on('click', function() {
         $("#educationForm").valid();  // <- TEST VALIDATION
     });

});

DEMO 2: http://jsfiddle/pdhvtpdq/

---

EDIT:

To check if a different form is valid, use the .valid() method inside of the submitHandler option.

In this example, when the submitHandler for "Form A" fires, it then checks if "Form B" is valid before allowing a submission.

$(document).ready(function() {

     $("#form_A").validate({              // initialize plugin on Form A
         submitHandler: function(form) {  // fires when Form A is valid
             if($("#form_B").valid()) {   // tests if Form B is valid
                 $(form).submit();        // submit Form A
             }
         }
     });

});

本文标签： javascriptJquery Validator valid() function not working on submitStack Overflow