CODEWITHSUNDEEP
jqueryformsjquery-validate
Sam
Sam

Reputation: 5270

jQuery validation is not working during button click

I have a simple page with a form and a button outside the form. I am trying to validate the form on the button click. I have added the rules for validation of the form on the document.onready function. However the form is not getting validated.

HTML 

<form id="form1" method="post" action="">
  <div>
    <input name="Name" id="name1" data-errorclass="error-name"/>
  </div>
  <input type="submit" id="name_id" value="Save"/>
</form>

JS

$(document).ready(function () {
   $("#name_id").click(function() {
     alert("called");
     $('.form1').validate({
       rules: {
        'Name' : {
            required: true
         }

       },
       messages: {
        'Name' : {
            required: 'Name is  required'
         }
       },
       errorClass: 'error-name',
       errorPlacement: function(err, element) {
        err.insertBefore(element);
        },        
     });
   });
});

fiddle

Upvotes: 5

Views: 8178

Answers (2)

Sparky
Sparky

Reputation: 98758

As already stated, the original code was targeting a class, .form1, while the actual form contained id="form1". Fixing the selector to target the id will quickly solve this.

$('#form1`).validate({...

Despite an answer already being posted, I feel the need to also post some important notes regarding some common misconceptions about this plugin.

The .validate() method is only used for plugin initialization, not a method for testing the validity. So putting .validate() inside a click handler makes no sense. .validate() only needs to be called one time, so being called repeatedly upon every click is redundant and unnecessary.

As long as the submit button is inside the <form> tags, there is no need for a click handler as this is automatically captured by the plugin. See: http://jsfiddle.net/B5mVh/6/

If the button is outside of the <form>, you can use the .valid() method to test the form's validity. 

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options      
    });

    // For button OUTSIDE of form tags
    $("#name_id").click(function() {
        if ($('#form1').valid()) {
            alert("form is valid");
        } else {
            alert("form is invalid");
        }
    });

});

DEMO: http://jsfiddle.net/B5mVh/4/

However, in your original code, the button is inside the form, so as explained before, there's no need for a click handler at all. But if you want to run some code upon the click event, use the submitHandler (when valid) and invalidHandler (when invalid) callback functions.

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options,
        submitHandler: function(form) {
             alert("form is valid");
             return false;
        },
        invalidHandler: function() {
            alert("form is invalid");
        }
    });

});

DEMO: http://jsfiddle.net/B5mVh/5/

Of course, you don't have to use these optional callback functions. The plugin works perfectly fine without them as shown before:

DEMO: http://jsfiddle.net/B5mVh/6/

Upvotes: 9

SidOfc
SidOfc

Reputation: 4594

In jQuery's validate() function you call it on a form with the class .form1, you should name this correctly to the corresponding ID #form1.

This should solve your issue.

Upvotes: 3

Related Questions