Jquery Validator valid() function not working on submit

Question

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

Answer 1

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.net/2vugwyfe/

OR: http://jsfiddle.net/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.net/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
             }
         }
     });

});