Questions tagged [jquery-validate]

The jQuery Validate plugin is a jquery plugin by Jörn Zaefferer. Its purpose is to perform client-side form validation of user entered data.

Helpful Links:

• Plugin Home
• Documentation
• Demos
• GitHub

Stack Snippet Starter Pack:

HTML - Include the plugin script someplace after the jQuery library:
(Use CDN links or host the scripts yourself)

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>

<form id="myform" action="post.php">
  <input type="text" name="first_name" /><br/>
  <input type="text" name="last_name" /><br/>
  <input type="text" name="phone" /><br/>
  <input type="submit" />
</form>

$(document).ready(function() {  // <-- ensure form's HTML is ready

  $("#myform").validate({  // <-- initialize plugin on the form.
    // your rules and other options,
    rules: {
      first_name: {  // <-- this is the name attribute, NOT id
        required: true
      },
      last_name: {
        required: true
      },
      phone: {
        required: true,
        digits: true
      }
    }
  });

});

jsFiddle Demo: http://jsfiddle.net/2nhcfkLj/

Documented Options: http://jqueryvalidation.org/validate

Helpful questions:

• How to create a simple, custom rule
• How to declare rules
• Changing default error messages
• Assign rules without using name attribute
• How to validate a hidden field
• How to use jQuery Validate in ASP.Net with Master Pages

Other typical issues:

• All input elements to be validated must be enclosed within a set of <form></form> tags. The only elements that can be validated are select, textarea, certain input types, and certain elements containing the contenteditable attribute.
• Rules are defined by input name attributes, not by id, when declared within the rules option of .validate().
• all input elements to be validated must contain a unique name attribute. (All radio or checkbox elements within a single "grouping" may share the same name as this one grouping is considered a single data point. However, each grouping must contain a unique name.)
• .validate() should be called once within DOM ready to initialize the plugin. Optionally use .valid() to test the form for validity and get a boolean result of that test.
• There is no need to enclose .validate() inside of any click or submit handler. The plugin will automatically capture and handle the submit button.
• A name with certain special characters must be enclosed in quotes when declared within the rules option of .validate().
• Use the submitHandler callback function to deal with successfully validated forms and/or submit via ajax.
• Use the invalidHandler callback function for invalid forms.
• If using the highlight or unhighlight callback function, be sure to also include the other one. They are complementary and should be used together for best results.
• By default, the plugin will ignore any hidden input elements. This can be prevented by setting the ignore option to ignore: [] (ignore nothing; validate everything).
• If you have multiple submit buttons where one (such as "save") needs to bypass validation but still needs to submit the form data, use class="cancel" on the button.

Related tags

• jquery