jQuery validation plug in validation user guide

In the process of website development, sometimes we need to verify whether the information entered by the user meets our requirements, so we will verify the data submitted by the user. Validation is done twice, once on the client side and once on the server side. Client-side validation can improve the user experience.

There are many validation plug-ins for jquery, and they do pretty much the same thing. This article covers only one type of jquery.validate in the jquery validation plug-in

jquery.Validation is an excellent plug-in for jquery, which can validate the client form and provide many customizable properties and methods, with good extensibility.

1.jquery.validate plug-in function

Simple implementation of the client information validation, filtering does not meet the requirements of the information

2.jquery.validate official address

Official address: http:// jqueryvalidation.org /, with detailed instructions on how to use the plug-in

Official demo: http: / / jquery bassistance. de/validate demo /

3. How to use jquery

1. The reference js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

2. The css style can be customized, as simple as adding the error style or using the official demo style.

.error{
  color:red;
  margin-left:8px;
}

3. js code

$(document).ready(function() {
  // validate signup form on keyup and submit
  var validator = $("#signupform").validate({
    rules: {
      firstname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      password_confirm: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true,
      },
      dateformat: "required",
      terms: "required"
    },
    messages: {
      firstname: " The name cannot be empty ",
      username: {
        required: " The username cannot be empty ",
        minlength: jQuery.format(" The user name is limited by  {0}  characters ")
      },
      password: {
        required: " The password cannot be empty ",
        minlength: jQuery.format(" Password by little  {0}  characters ")
      },
      password_confirm: {
        required: " Make sure the password is not empty ",
        minlength: jQuery.format(" Confirm password by less  {0}  characters "),
        equalTo: " Secret and confirm password not 1 to "
      },
      email: {
        required: " The mailbox cannot be empty ",
        email: " Incorrect mailbox format "
      },
      dateformat: " Please select gender ",
      terms: " "
    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
      if ( element.is(":radio") )
        error.appendTo( element.parent().next().next());
      else if ( element.is(":checkbox") )
        error.appendTo ( element.next());
      else
        error.appendTo( element.parent().next());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
      alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
      // set   as text for IE
      label.html(" ").addClass("checked");
    },
    highlight: function(element, errorClass) {
      $(element).parent().next().find("." + errorClass).removeClass("checked");
    }
  });
});

The above code USES only the properties and methods provided by the plug-in. You can also customize validation methods. Such as

$.validator.addMethod("checkUserName", function(value) {

    //value Is the value of validation, corresponding to the element id

  // Method code 

}, ' Incorrect user name format ');

Using a custom method is also very simple, requiring only the element id: "checkUserName"

4. html used

<form id="signupform" autocomplete="off" method="get" action="">
   <table>
   <tr>
    <td class="label"><label id="lfirstname" for="firstname"> The name </label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lusername" for="username"> The user name </label></td>
    <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword" for="password"> password </label></td>
    <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword_confirm" for="password_confirm"> Confirm password </label></td>
    <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lemail" for="email"> email </label></td>
    <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
    <td class="status"></td>
   </tr>
         <tr>
    <td class="label"><label> gender </label></td>
    <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
    <table>
    <tbody>

    <tr>
      <td style="padding-right: 5px;">
        <input id="sex_men" name="dateformat" type="radio" value="0" />
        <label id="lbl_sex_men" for="dateformat_eu"> male </label>
      </td>
      <td style="padding-left: 5px;">
        <input id="sex_women" name="dateformat" type="radio" value="1" />
        <label id="lbl_sex_women" for="dateformat_am"> female </label>
      </td>
      <td>
      </td>
    </tr>
    </tbody>
    </table>
    </td>
   </tr>

   <tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
      <div id="termswrap">
        <input id="terms" type="checkbox" name="terms" />
        <label id="lterms" for="terms"> To read and agree to the site terms .</label>
      </div> <!-- /termswrap -->
    </td>
   </tr>
   <tr>
    <td class="label"></td>
    <td class="field" colspan="2">
    <input id="signupsubmit" name="signup" type="submit" value=" registered " />
    </td>
   </tr>

   </table>
</form>

See http:// jqueryvalidation.org/for more examples of validation methods