Category Archives: Methods

minlength method

minlength( length )Returns: Boolean

Description: Makes the element require a given minimum length.

Return false if the element is

  • some kind of text input and its value is too short
  • a set of checkboxes that doesn't have enough boxes checked
  • a select and doesn't have enough options selected

Works with text inputs, selects and checkboxes.

Example:

Makes "field" required having at least 3 characters.

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 having at least 3 characters.</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required, minimum length 3: </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.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

      minlength: 3

    }

  }

});

</script>

</body>

</html>

Demo:

min method

min( value )Returns: Boolean

Description: Makes the element require a given minimum.

Example:

Makes "field" required and 13 or larger.

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 13 or larger.</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required, minimum 13: </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.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

      min: 13

    }

  }

});

</script>

</body>

</html>

Demo:

maxlength method

maxlength( length )Returns: Boolean

Description: Makes the element require a given maximum length.

Return false if the element is

  • some kind of text input and its value is too long
  • a set of checkboxes that has too many boxes checked
  • a select and has too many options selected

Works with text inputs, selects and checkboxes.

Example:

Makes "field" required having at most 4 characters.

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 having at most 4 characters.</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required, maximum length 4: </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.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

      maxlength: 4

    }

  }

});

</script>

</body>

</html>

Demo:

max method

max( value )Returns: Boolean

Description: Makes the element require a given maximum.

Example:

Makes "field" required and 23 or smaller.

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 23 or smaller.</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required, maximum value 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.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

      max: 23

    }

  }

});

</script>

</body>

</html>

Demo:

extension method

extension( [extension ] )Returns: Boolean

Description: Makes the element require a certain file extension.

Returns true if the value ends with one of the specified file extensions. If nothing is specified, only images are allowed (png, jpeg, gif).

Works with text inputs.

Part of the additional-methods.js file

Example:

Makes "field" required and ending with ".xls" or ".csv".

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 ending with ".xls" or ".csv".</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="field">Required, only .xls and .csv files allowed: </label>

<input type="file" 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.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

      extension: "xls|csv"

    }

  }

});

</script>

</body>

</html>

Demo:

equalTo method

equalTo( other )Returns: Boolean

Description: Requires the element to be the same as another one

Example:

Makes "field" required to be the same as #other

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
 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Makes "field" required to be the same as #other</title>

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

 
</head>

<body>

<form id="myform">

<label for="password">Password</label>

<input id="password" name="password" />

<br/>

<label for="password_again">Again</label>

<input class="left" id="password_again" name="password_again" />

<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.16.0/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({

  debug: true,

  success: "valid"

});

$( "#myform" ).validate({

  rules: {

    password: "required",

    password_again: {

      equalTo: "#password"

    }

  }

});

</script>

</body>

</html>

Demo:

email method

Returns: Boolean

Description: Makes the element require a valid email

    Return true if the value is a valid email address.

    Works with text inputs.

    IMPORTANT NOTE:

    As of version 1.12.0 we started using the same regular expression that the HTML5 specification suggests for browsers to use. We will follow their lead and use the same check. In case you need to adjust the built-in validation regular expression patterns, please use the $.validator.methods property. If you have different requirements, please consider using a custom method.

    Example:

    Makes "field" required and an email address.

    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 an email address.</title>

    <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

     
    </head>

    <body>

    <form id="myform">

    <label for="field">Required, email: </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.16.0/jquery.validate.min.js"></script>

    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

          email: true

        }

      }

    });

    </script>

    </body>

    </html>

    Demo:

    digits method

    Returns: Boolean

    Description: Makes the element require digits only.

      Returns true if the value contains only digits.

      Works with text inputs.

      Example:

      Makes "field" required and digits 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 digits only.</title>

      <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

       
      </head>

      <body>

      <form id="myform">

      <label for="field">Required, digits: </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.16.0/jquery.validate.min.js"></script>

      <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

            digits: true

          }

        }

      });

      </script>

      </body>

      </html>

      Demo:

      dateISO method

      Returns: Boolean

      Description: Makes the element require an ISO date.

        Return true if the value is a valid date according to ISO date standard.

        Works with text inputs.

        Example:

        Makes "field" required and an ISO date.

        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 an ISO date.</title>

        <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

         
        </head>

        <body>

        <form id="myform">

        <label for="field">Required, dateISO: </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.16.0/jquery.validate.min.js"></script>

        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

              dateISO: true

            }

          }

        });

        </script>

        </body>

        </html>

        Demo:

        [DEPRECATED] date method

        Returns: Boolean

        Description: Makes the element require a date.

          Return true if the value is a valid date. Uses JavaScript's built-in Date to test if the date is valid, and therefore does no sanity checks. Only the format must be valid, not the actual date, eg 30/30/2008 is a valid date.

          DEPRECATION warning:

          This method is deprecated and will be removed in version 2.0.0.
          Please don't use it, since it relies on the Date constructor, which behaves very differently across browsers and locales. Use dateISO instead or one of the locale specific methods (in localizations/ and additional-methods.js).

          Example:

          Makes "field" required and a date.

          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 date.</title>

          <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

           
          </head>

          <body>

          <form id="myform">

          <label for="field">Required, date: </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.16.0/jquery.validate.min.js"></script>

          <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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,

                date: true

              }

            }

          });

          </script>

          </body>

          </html>

          Demo: