Monthly Archives: May 2013

phoneUS method

Returns: Boolean

Description: Validate for valid US phone number.

    Works with text inputs.

    Part of the additional-methods.js file

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

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

            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="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:

      jQuery.validator.format()

      jQuery.validator.format( template, argument, argumentN… )

      Description: Replaces {n} placeholders with arguments.

      One or more arguments can be passed, in addition to the string template itself, to insert into the string.

      If you're familiar with the term, this makes this function support currying. If you don't care about that, just use the first argument.

      Example:

      Sets the debug setting for all validation calls.

      1
      2
      3
      		 
      var template = jQuery.validator.format("{0} is not a valid value");

      // later, results in 'abc is not a valid value'

      alert(template("abc"));

      jQuery.validator.addMethod()

      jQuery.validator.addMethod( name, method [, message ] )

      Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.

      • jQuery.validator.addMethod( name, method [, message ] )

        • name
          Type: String
          The name of the method used to identify it and referencing it; this must be a valid JavaScript identifier
        • method
          Type: Function()
          The actual method implementation, returning true if an element is valid. First argument: Current value. Second argument: Validated element. Third argument: Parameters.
          • value
            Type: String
            the current value of the validated element
          • element
            Type: Element
            the element to be validated
          • params
            Type: Object
            parameters specified for the method, e.g. for min: 5, the parameter is 5, for range: [1, 5] it's [1, 5]
        • message
          Type: String
          The default message to display for this method. Can be a function created by ''jQuery.validator.format(value)''. When undefined, an existing message is used (handy for localization), otherwise the field-specific messages have to be defined.
      For simple one-off validation, you can use the bundled pattern method (in additional methods, source in src/additional/pattern.js) to validate a field against a regular expression. In general, it is a good idea to encapsulate those regular expressions inside their own method. If you need lots of slightly different expressions, try to extract a common parameter.

      See also a library of regular expressions.

      Examples:

      Example: Add a validation method that checks if a value starts with a certain domain.

      1
      2
      3
      		 
      jQuery.validator.addMethod("domain", function(value, element) {

        return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);

      }, "Please specify the correct domain for your documents");

      Example: Adds a validation method that checks if a given value equals the addition of the two parameters.

      1
      2
      3
      		 
      jQuery.validator.addMethod("math", function(value, element, params) {

        return this.optional(element) || value == params[0] + params[1];

      }, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

      Example: Adds a custom email validation method that is less strict than the one built-in.

      1
      2
      3
      4
      		 
      jQuery.validator.addMethod("laxEmail", function(value, element) {

        // allow any non-whitespace characters as the host part

        return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value );

      }, 'Please enter a valid email address.');

      :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: