Category Archives: Methods

step method

step( value )Returns: Boolean

Description: Makes the element require a given step.

Example:

Makes "field" required and step of 10.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and step of 10.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, step 10: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
step: 10
}
}
});
</script>
</body>
</html>

Demo:

normalizer

normalizer( value )Returns: String

Description: Prepares/transforms the elements value for validation.

Note that this method:

Doesn't change the elements' value, it only changes the value used for validation.

Gets the value passed as argument, and "this" within it references the corresponding DOMElement.

Needs to return a String value, otherwise it will throw a TypeError exception.

Examples:

Example: Makes "field" required and use a normalizer to trim its value before validating

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and use a normalizer to trim its value before validating</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate( {
rules: {
field: {
required: true,
normalizer: function( value ) {
// Trim the value of the `field` element before
// validating. this trims only the value passed
// to the attached validators, not the value of
// the element itself.
return $.trim( value );
}
}
}
} );
</script>
</body>
</html>

Demo:

Example: Makes "url" required and use a normalizer to append 'http://', if not present, to the value of the "url" element before validating

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "url" required and use a normalizer to append 'http://', if not present, to the value of the "url" element before validating</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="url_input">url: </label>
<input class="left" id="url_input" name="url_input">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate( {
rules: {
url_input: {
required: true,
url: true,
normalizer: function( value ) {
var url = value;
// Check if it doesn't start with http:// or https:// or ftp://
if ( url && url.substr( 0, 7 ) !== "http://"
&& url.substr( 0, 8 ) !== "https://"
&& url.substr( 0, 6 ) !== "ftp://" ) {
// then prefix with http://
url = "http://" + url;
}
// Return the new url
return url;
}
}
}
} );
</script>
</body>
</html>

Demo:

require_from_group method

Returns: Boolean

Description: Ensures a given number of fields in a group are complete.

    Example:

    Within a group of three phone numbers, ensure at least one is complete.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Within a group of three phone numbers, ensure at least one is complete.</title>
    <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
    </head>
    <body>
    <form id="myform">
    <label for="mobile_phone">Mobile phone: </label>
    <input class="left phone-group" id="mobile_phone" name="mobile_phone">
    <br/>
    <label for="home_phone">Home phone: </label>
    <input class="left phone-group" id="home_phone" name="home_phone">
    <br/>
    <label for="work_phone">Work phone: </label>
    <input class="left phone-group" id="work_phone" name="work_phone">
    <br/>
    <input type="submit" value="Validate!">
    </form>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script>
    // just for the demos, avoids form submit
    jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
    });
    $( "#myform" ).validate({
    rules: {
    mobile_phone: {
    require_from_group: [1, ".phone-group"]
    },
    home_phone: {
    require_from_group: [1, ".phone-group"]
    },
    work_phone: {
    require_from_group: [1, ".phone-group"]
    }
    }
    });
    </script>
    </body>
    </html>

    Demo:

    url method

    Returns: Boolean

    Description: Makes the element require a valid url

      Return true, if the value is a valid url.

      Works with text inputs.

      Example:

      Makes "field" required and a url.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes "field" required and a url.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="field">Required, URL: </label>
      <input class="left" id="field" name="field">
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      field: {
      required: true,
      url: true
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      required method

      required()Returns: Boolean

      Description: Makes the element required.

      • required()

        • This signature does not accept any arguments.
      • required( dependency-expression )

        • dependency-expression
          Type: String
          An expression (String) that is evaluated in the context of the element's form, making the field required only if the expression returns more than one element.

          Very often your expression will use selector filters such as #foo:checked, #foo:filled, #foo:visible. This plugin provides custom selectors for that purpose.

      • required( dependency-callback )

        • dependency-callback
          Type: Function()
          The function is executed with the element as it's only argument: If it returns true, the element is required.
      Return false, if the element is empty (text input) or unchecked (radio/checkbox) or if nothing is selected (select).

      Works with text inputs, selects, checkboxes and radio buttons.

      To force a user to select an option from a select box, provide an empty option element like <option value="">Choose…</option>

      Examples:

      Example: Makes "field" always required. Nothing and blanks are invalid.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes "field" always required. Nothing and blanks are invalid.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="field">Required: </label>
      <input type="text" class="left" id="field" name="field">
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      field: {
      required: true
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      Example: Makes the fruit select required.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes the fruit select required.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="fruit">Please select a fruit</label>
      <select id="fruit" name="fruit" title="Please select something!">
      <option value="">Select...</option>
      <option value="1">Banana</option>
      <option value="2">Apple</option>
      <option value="3">Peach</option>
      </select>
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      fruit: {
      required: true
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      Example: Makes the gender radio buttons required.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes the gender radio buttons required.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="gender_male">
      <input type="radio" id="gender_male" value="m" name="gender" />
      Male
      </label>
      <label for="gender_female">
      <input type="radio" id="gender_female" value="f" name="gender"/>
      Female
      </label>
      <label for="gender" class="error">Please select your gender</label>
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      gender: {
      required: true
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      Example: Makes the agree checkbox required.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes the agree checkbox required.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="agree">Please agree to our policy</label>
      <input type="checkbox" id="agree" title="Please agree to our policy!" name="agree" />
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      agree: {
      required: true
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      Example: Makes details required only if #other is checked.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes details required only if #other is checked.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="other">Check to make next field required</label>
      <input id="other" type="checkbox">
      <br>
      <input id="details" name="details">
      <br>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      details: {
      required: "#other:checked"
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      Example: Makes "parent" required only if age is below 13.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes "parent" required only if age is below 13.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label>Age </label>
      <input id="age" name="age">
      <br>
      <label>Parent </label>
      <input id="parent" name="parent">
      <br>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      age: {
      required: true,
      min: 3
      },
      parent: {
      required: function(element) {
      return $("#age").val() < 13;
      }
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      remote method

      remote( options )Returns: Boolean

      Description: Requests a resource to check the element for validity.

      • remote( options )

        • options
          Type: Object
          For the URL of the resource to request for serverside validation (String) or options to fully customize the request, see jQuery.ajax for details.

          These options deep-extend the defaults (dataType:"json", data:{nameOfTheElement:valueOfTheElement}). Any options you provide will override the defaults.

      The serverside resource is called via jQuery.ajax (XMLHttpRequest) and gets a key/value pair corresponding to the name of the validated element and its value as a GET parameter. The serverside response must be a JSON string that must be "true" for valid elements, and can be "false", undefined, or null for invalid elements, using the default error message. If the serverside response is a string, eg. "That name is already taken, try peter123 instead", this string will be displayed as a custom error message in place of the default.

      For more examples, take a look the marketo demo and the milk demo.

      Examples:

      Example: Makes the email field required, an email and does a remote request to check if the given address is already taken.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      $( "#myform" ).validate({
      rules: {
      email: {
      required: true,
      email: true,
      remote: "check-email.php"
      }
      }
      });

      Example: Makes the email field required, an email and does a remote request to check if the given address is already taken. In addition, the http method is set to "post" and the username is sent alongside the email address.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      $( "#myform" ).validate({
      rules: {
      email: {
      required: true,
      email: true,
      remote: {
      url: "check-email.php",
      type: "post",
      data: {
      username: function() {
      return $( "#username" ).val();
      }
      }
      }
      }
      }
      });

      rangelength method

      rangelength( range )Returns: Boolean

      Description: Makes the element require a given value range.

      Return false if the element is

      • some kind of text input and its length is too short or too long
      • a set of checkboxes that doesn't have enough, or has too many boxes checked
      • a select that doesn't have enough, or has too many options selected

      Works with text inputs, selects and checkboxes.

      Example:

      Makes "field" required and between 2 and 6 characters long.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes "field" required and between 2 and 6 characters long.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="field">Required, minium length 2, maximum length 6: </label>
      <input type="text" class="left" id="field" name="field">
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      field: {
      required: true,
      rangelength: [2, 6]
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      range method

      range( range )Returns: Boolean

      Description: Makes the element require a given value range.

      Example:

      Makes "field" required and between 13 and 23.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Makes "field" required and between 13 and 23.</title>
      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
      </head>
      <body>
      <form id="myform">
      <label for="field">Required, minium 13, maximum 23:</label>
      <input type="text" class="left" id="field" name="field">
      <br/>
      <input type="submit" value="Validate!">
      </form>
      <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
      <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
      <script>
      // just for the demos, avoids form submit
      jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
      });
      $( "#myform" ).validate({
      rules: {
      field: {
      required: true,
      range: [13, 23]
      }
      }
      });
      </script>
      </body>
      </html>

      Demo:

      phoneUS method

      Returns: Boolean

      Description: Validate for valid US phone number.

        Example:

        Makes "field" required and a US phone number.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Makes "field" required and a US phone number.</title>
        <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
        </head>
        <body>
        <form id="myform">
        <label for="field">Required, us phone number: </label>
        <input class="left" id="field" name="field">
        <br/>
        <input type="submit" value="Validate!">
        </form>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
        <script>
        // just for the demos, avoids form submit
        jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
        });
        $( "#myform" ).validate({
        rules: {
        field: {
        required: true,
        phoneUS: true
        }
        }
        });
        </script>
        </body>
        </html>

        Demo:

        number method

        Returns: Boolean

        Description: Makes the element require a decimal number.

          Returns true if the value contains a valid decimal number.

          Works with text inputs.

          Example:

          Makes "field" required and a decimal number only.

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Makes "field" required and a decimal number only.</title>
          <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
          </head>
          <body>
          <form id="myform">
          <label for="field">Required, decimal number: </label>
          <input class="left" id="field" name="field">
          <br/>
          <input type="submit" value="Validate!">
          </form>
          <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
          <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
          <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
          <script>
          // just for the demos, avoids form submit
          jQuery.validator.setDefaults({
          debug: true,
          success: "valid"
          });
          $( "#myform" ).validate({
          rules: {
          field: {
          required: true,
          number: true
          }
          }
          });
          </script>
          </body>
          </html>

          Demo: