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.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,
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.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,
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.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,
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.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,
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.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,
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.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: {
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.

    In case you need a custom email pattern use the $.validator.methods property.

    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.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,
    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.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,
      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.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,
        dateISO: true
        }
        }
        });
        </script>
        </body>
        </html>

        Demo:

        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.

          This method should not be used, since it relies on the new 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.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,
          date: true
          }
          }
          });
          </script>
          </body>
          </html>

          Demo: