Category Archives: Methods

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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
    <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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 method 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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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 response is evaluated as JSON and must be true for valid elements, and can be any false, undefined or null for invalid elements, using the default message; or a string, eg. "That name is already taken, try peter123 instead" to display as the error message.

      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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
      <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
        <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
          <script src="http://jquery.bassistance.de/validate/additional-methods.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:

          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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
          <script src="http://jquery.bassistance.de/validate/additional-methods.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="http://jquery.bassistance.de/validate/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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
          <script src="http://jquery.bassistance.de/validate/additional-methods.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: