jQuery Validate using onclick handler not validating fields?

Question

I want to use an onlick event handler to validate some form fields using jquery Validate. To do this I have the following code:

<input type="text" id="Name" name="Name">  
<a class="btn btn-primary js-add-names" href="#">Add Names</a> 

<input type="text" id="Age" name="Age">
<a class="btn btn-primary js-add-ages" href="#">Add Age</a> 

<script>


   $(".js-add-names").click(function (e) {

     e.preventDefault();

     $("form").validate({
        rules: {
          Name: {
             required: true
          }
        },
        messages: {
          Name: "The Name is required"
        }

     });

     if (!$("form").valid()) {
        return;
     }

     //  otherwise do stuff but we dont want to submit form
   });


   $(".js-add-ages").click(function (e) {

     e.preventDefault();

     $("form").validate({
        rules: {
          Age: {
             required: true
          }
        },
        messages: {
          Age: "The Age is required"
        }

     });

     if (!$("form").valid()) {
        return;
     }

     //  otherwise do stuff but we dont want to submit form
   });

</script>

What I've noticed is that only one event handler works out the two based on whichever one was clicked first i.e. if I click the button with class js-add-names, the validation for that handler works as expected.

Now If I click the button with class js-add-ages having previously clicked js-add-names then the handler for js-add-age doesn't work and vis versa?

Any ideas why this is happening and what is the fix?

* UPDATE *

Further to suggestion by Sparky I have re-written the code as below but now when I click js-add-names, the validation for that handler works as expected

Now If I click the button with class js-add-ages having previously clicked js-add-names then the handler for js-add-age doesn't work becuase the validation has previously added a rule for input #Name. How do I reset the form or remove the rules each time the event handlers fire?

<form>
   <input type="text" id="Name" name="Name">  
   <a class="btn btn-primary js-add-names" href="#">Add Names</a> 

   <input type="text" id="Age" name="Age">
   <a class="btn btn-primary js-add-ages" href="#">Add Age</a> 

   // other inputs
   <input type="checkbox" name="CarOwner" value="Yes"> Car owner

   <input type="submit" value="Submit">
</form>

<script>

   $("form").validate();

   $(".js-add-names").click(function (e) {

     e.preventDefault();

     $("#Age").rules("remove");

     $("#Name").rules("add", {
        required: true,
        messages: {
            required: "The Name is required"
        }
     });

     if (!$("form").valid()) {
        return;
     }

     //  otherwise do stuff but we dont want to submit form
     //  ...

     //Reset input field
     $("#Name").val('');
   });


   $(".js-add-ages").click(function (e) {

     e.preventDefault();

     $("#Name").rules("remove");

     $("#Age").rules("add", {
        required: true,
        messages: {
            required: "The Age is required"
        }
     });

     if (!$("form").valid()) {
        return;
     }

     //  otherwise do stuff but we dont want to submit form
     //  ...

     //Reset input field
     $("#Age").val('');
   });

</script>

Do you want to validate one field by click or might validate 2 fields at the same time? — Jose Rojas
– Jose Rojas, Commented Nov 29, 2016 at 16:02

Sparky · Accepted Answer · 2016-11-30 17:49:39Z

2

Any ideas why this is happening and what is the fix?

The .validate() method is only used for initializing the plugin on your form and therefore should only be called once when the page is loaded. Subsequent calls are always ignored. So when you use one click handler, you initialize the validate plugin, and the other call to .validate() in the other click handler will do nothing.

The fix...

Call .validate() ONE time to initialize the plugin on your form.
Do NOT call .validate() from a click handler since this is not the testing method; it's only the initialization method.
Use the plugin's built-in submitHandler and invalidHandler functions for stuff you need to do when the form is valid and invalid.
Since you appear to be using your click handlers to add fields/rules to an existing form, then use the .rules('add') and .rules('remove') methods to add and remove any rules dynamically.

edited Nov 30, 2016 at 17:49

answered Nov 29, 2016 at 17:42

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

Sparky Over a year ago

Quote @adam78 : "How do I reset the form or remove the rules each time the event handlers fire?" ~ See my edits... use a .rules('remove').

adam78 Over a year ago

I've added the .rules('remove') but now I've noticed the form is requiring a double click on all my form inputs and buttons?

Sparky Over a year ago

@adam78, I am absolutely not seeing any behavior like that here... everything is working as expected without double-clicks: jsfiddle.net/yvop9t91

Collectives™ on Stack Overflow

jQuery Validate using onclick handler not validating fields?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related