Monthly Archives: May 2013

extension method

extension( [extension ] )Returns: Boolean

Description: Makes the element require a certain file extension.

extension( [extension ] )
- extension
  
  Type: String
  
  The allowed file extensions, seperated with "|" (or a comma, ","), defaults to "png|jpe?g|gif".

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

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

equalTo( other )
- other
  
  Type: Selector
  
  The selector for the element to compare the current values

Example:

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

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

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

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

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

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

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

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

accept( mimetype )
- mimetype
  
  Type: String
  
  The allowed type, seperated via ",", defaults to "image/*"

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:

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

Validator.showErrors()

Validator.showErrors( errors )

Description: Show the specified messages.

Validator.showErrors( errors )
- errors
  
  Type: Object
  
  One or more key/value pairs of input names and messages.

Example:

Adds and shows error message programmatically.

var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
  "firstname": "I know that your firstname is Pete, Pete!"
});

extension( [extension ] )Returns: Boolean

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

Demo:

equalTo( other )Returns: Boolean

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

Demo:

Returns: Boolean

Makes "field" required and an email address.

Demo:

Returns: Boolean

Makes "field" required and digits only.

Demo:

Returns: Boolean

Makes "field" required and an ISO date.

Demo:

Returns: Boolean

Makes "field" required and a date.

Demo:

Returns: Boolean

Makes "field" required and credit card only.

Demo:

blank selector

jQuery( ":blank" )

Finds input elements with no value or just whitespace.

Demo:

accept( mimetype )Returns: Boolean

Required, only audio files allowed:

Demo:

Validator.showErrors( errors )

Adds and shows error message programmatically.