Author Archives: jzaefferer

:filled Selector

filled selector

Description: Selects all elements with a filled value.

  • jQuery( ":filled" )

filled means any value, but not only whitespace.

The implementation does a check like this: jQuery.trim(value).length > 0

Example:

Finds input elements with a non-whitespace value.

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Finds input elements with a non-whitespace value.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<div>Mouseover to see the value of each input</div>
<input value="" title='""'>
<input value=" " title='" "'>
<input value="abc" title='"abc"'>
</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"
});
$( "input:filled" ).css( "background-color", "#bbbbff" );
</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:

          creditcard method

          Returns: Boolean

          Description: Makes the element require a credit card number.

            Return true if the value is a valid credit card number.

            Works with text inputs.

            Part of the additional-methods.js file

            Note: The algorithm used can't verify the validity of the number – it is just an integrity check. As with any other clientside validation, you have to implement the same or better validation on the serverside.

            Example:

            Makes "field" required and credit card 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 credit card only.</title>
            <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
            </head>
            <body>
            <form id="myform">
            <label for="field">Required, creditcard (try 446-667-651): </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,
            creditcard: true
            }
            }
            });
            </script>
            </body>
            </html>

            Demo:

            :blank Selector

            blank selector

            Description: Selects all elements with a blank value.

            • jQuery( ":blank" )

            Blank means either no value at all or only whitespace.

            The implementation does a check like this: jQuery.trim(value).length == 0

            Example:

            Finds input elements with no value or just whitespace.

            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
            <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>Finds input elements with no value or just whitespace.</title>
            <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
            </head>
            <body>
            <form id="myform">
            <div>Mouseover to see the value of each input</div>
            <input value="" title='""'>
            <input value=" " title='" "'>
            <input value="abc" title='"abc"'>
            </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"
            });
            $( "input:blank" ).css( "background-color", "#bbbbff" );
            </script>
            </body>
            </html>

            Demo:

            accept method

            accept( mimetype )Returns: Boolean

            Description: Makes a file upload accept only specified mime-types.

            Uses the HTML5 file API to look at the type attribute of one or more selected files and validate that each matches the specified mime-type.

            If nothing is specified, only images are allowed (image/*).

            You can specify multiple mime-types by separating them with a comma, e.g. "image/x-eps,application/pdf".

            Works with type="file" inputs.

            Part of the additional-methods.js file

            Note: This method used to look at just the filename, specifically the file extension. That behaviour is now available as the "extension" method inside src/additional/extension.js.

            Example:

            Required, only audio files allowed:

            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>Required, only audio files allowed:</title>
            <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
            </head>
            <body>
            <form id="myform">
            <label for="field">Required, audio files only: </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,
            accept: "audio/*"
            }
            }
            });
            </script>
            </body>
            </html>

            Demo: