English
资源说明：[DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.
```
### Simple captcha
```
```
### Google reCAPTCHA
Use this validator if wanting to integrate the Google service reCAPTCHA.
```
# jQuery Form Validator [DISCONTINUED] *Validation framework that let's you configure, rather than code, your validation logic.* I started writing this plugin back in 2009 and it has given me much joy over the years. But all good things must come to an end and now it's time for this plugin to pull in its oars and go down with history. **This plugin is no longer being developed!** It supports jQuery v. 1.8 >= 2.2.4. No pull requests will become merged in but feel free to fork and do whatever you like! [](https://travis-ci.org/victorjonsson/jQuery-Form-Validator/builds/) [](https://www.npmjs.com/package/jquery-form-validator) *Usage example* ```html``` ### Support for HTML5 This plugin can serve as a fallback solution for the validation attributes in the HTML5 spec. With the html5 module you can use the following native features: **Attributes**: require, pattern, maxlength, min, max, placeholder **Input types**: url, date, time, email, number **Elements**: Use the element `datalist` to create input suggestions ### Default validators and features (no module needed) * **url** * **email** * **domain** — *domain.com* * **number** — *float/negative/positive/range/step* * **date** — *yyyy-mm-dd (format can be customized, more information below)* * **alphanumeric** — *with support for defining additional characters* * **length** — *min/max/range* * **required** — *no validation except that a value has to be given* * **custom** — *Validate value against regexp* * **checkboxgroup** — *ensure at least 1 checkbox in group has been selected* * Show help information automatically when input is focused * Validate given values immediately when input looses focus. * Make validation optional by adding attribute data-validation-optional="true" to the element. This means that the validation defined in data-validation only will take place in case a value is given. * Make validation dependent on another input of type checkbox being checked by adding attribute data-validation-if-checked="name of checkbox input" * Create input suggestions with ease, no jquery-ui needed * to apply multiple validators to an input element, separate the validator names using a space (ex: required email) Read the documentation for the default features at [#default-validators](#default-validators) ### Module: security * **spamcheck** * **confirmation** * **creditcard** * **CVV** * **strength** — *Validate the strength of a password* * **server** — *Validate value of input on server side* * **letternumeric** — *Validate that the input value consists out of only letters and/or numbers* * **recaptcha** - *Validate Google [reCaptcha 2](https://www.google.com/recaptcha/intro/index.html)* Read the documentation for the security module at [#security-validators](#security-validators) ### Module: date * **time** — *hh:mm* * **birthdate** — *yyyy-mm-dd, not allowing dates in the future or dates that's older than 122 years (format can be customized, more information below)* Read the documentation for the date module at [#date-validators](#date-validators) ### Module: location * **country** * **federatestate** * **longlat** * Suggest countries (english only) * Suggest states in the US Read the documentation for the location module at [#location-validators](/#location-validators) ### Module: file * **mime** * **extension** * **size** (file size) * **dimension** (size dimension and ratio) Read the documentation for the file module at [#file-validators](#file-validators) ### Module: logic * **Dependent validation** * **Require "one-of"** Read the documentation for this module at [/#logic](#logic) ### Module: sepa * **IBAN** * **BIC** * **Sepa** Read the documentation for this module at [http://formvalidator.net/#sepa](http://www.formvalidator.net/#sepa) ### Module: sweden * **swemob** — *validate that the value is a swedish mobile telephone number* * **swesec** — *validate swedish social security number* * **county** - *validate that the value is an existing county in Sweden* * **municipality** - *validate that the value is an existing municipality in Sweden* * Suggest county * Suggest municipality Read the documentation for the Swedish module at [http://formvalidator.net/#sweden-validators](http://www.formvalidator.net/#country-specific-validators_sweden) ### Module: uk * **ukvatnumber** * **uknin** * **ukutr** Read the documentation for the UK module at [http://formvalidator.net/#uk-validators](http://www.formvalidator.net/#country-specific-validators_uk) ### Module: brazil * **brphone** — *Validate a brazilian telephone number* * **cep** * **cpf** ### Module: poland * **plpesel** - *validate polish personal identity number (in Polish identity cards)* * **plnip** - *validate polish VAT identification number* * **plregon** - *validate polish bussiness identity number* ### Module: color * **hex** - *validate hex color format* * **rgb** - *validate rgb color format* * **rgba** - *validate rgba color format* * **hsl** - *validate hsl color format* * **hsla** - *validate hsla color format* ### Module: sanitation * **trim** * **trimLeft** * **trimRight** * **upper** — Convert all letters to upper case * **lower** — Convert all letters to lower case * **capitalize** — Convert the first letter in all words to upper case * **insertRight** — Declare a text that should be inserted at the end of the value, attribute data-sanitize-insert-right * **insertLeft** — Declare a text that should be inserted at the beginning of the value, attribute data-sanitize-insert-left * **escape** — Convert < > & ' " to html entities * **strip** — Comma separated list with words that gets automatically removed * **numberFormat** — Declare the attribute data-sanitize-number-format with any of the formats described on http://numeraljs.com/. Note that this rule requires that numeral.js is included in the page Read the documentation for the sanitation module at [http://formvalidator.net/#data-sanitation](http://formvalidator.net/#data-sanitation) ## Writing a custom validator You can use the function `$.formUtils.addValidator()` to add your own validation function. Here's an example of a validator that checks if the input contains an even number. ```html ``` ### Required properties passed into $.formUtils.addValidator *name* - The name of the validator, which is used in the validation attribute of the input element. *validatorFunction* - Callback function that validates the input. Should return a boolean telling if the value is considered valid or not. *errorMessageKey* - Name of language property that is used in case the value of the input is invalid. *errorMessage* - An alternative error message that is used if errorMessageKey is left with an empty value or isn't defined in the language object. Note that you also can use [inline error messages](http://formvalidator.net/#localization) in your form. The validation function takes these five arguments: - value — the value of the input thats being validated - $el — jQuery object referring to the input element being validated - config — Object containing the configuration of this form validation - language — Object with error dialogs - $form — jQuery object referring to the form element being validated ## Creating a custom module A "module" is basically a javascript file containing one or more calls to [$.formUtils.addValidator()](#writing-a-custom-validator). The module file must be placed in the same directory as `jquery.form-validator.min.js` if you want it to load automatically via the setup function. You can use the method `$.formUtils.loadModules` if you want to load the module from a custom path. ```js $.formUtils.loadModules('customModule otherCustomModule', 'js/validation-modules/'); $.validate({ modules: 'security, date' }); ``` The first argument of `$.formUtils.loadModules` is a comma separated string with names of module files, without file extension. The second argument is the path where the module files are located. This argument is optional, if not given the module files has to be located in the same directory as the core modules shipped together with this jquery plugin (js/form-validator/) ## Show help information It is possible to display help information for each input. The information will fade in when input is focused and fade out when input looses focus. ```html ``` Inputs of type "number" will also become validated by loading the html5 module. ### E-mail ``` ``` Inputs of type "email" will also become validated by loading the html5 module. ### URL:s ``` ``` Inputs of type "url" will also become validated by loading the html5 module. ### Date ``` ``` See the date module for further validators. ### Alphanumeric ``` ``` If you want to allow any kind of letters (not only A-Z) you're looking for the letternumeric validator. ### Checkboxes Group Validate qty of checkboxes in a group (same name) have been checked, using min, max or range. Only the first checkbox element in the group needs to have the validation attributes added. ``` If your checkboxes group is generated by a server-side script and you don't want to add the validation attributes to each input element, you can use this javascript snippet before calling the validatorLoad() function Regexp ``` This plugin also supports the attribute "pattern" by using the Html5 module. ### Character count down ```
History (50 characters left)
``` ### Make validation optional ``` ``` You can also use the logic module if you want the validation of an input depend on another input having a value. ### Display help text It is possible to display help information beside each input. The text will fade in when the input gets focus on and fade out when the input looses focus. The container for the help text will have the class form-help. If you don't want this feature you can read the setup guide on how to disable it. ``` ``` ### Validate inputs when blurred By default each input will become validated immediately when the input looses focus. If you don't want this feature you can read the setup guide on how to disable it. ### Input suggestions There are two ways you can give suggestions to the user while the user types. 1) Using attribute data-suggestions ```What's your favorite color?
... ``` 2) Using $.formUtils.suggest() ``` ``` This plugin also supports the data-list element by using the Html5 module. Ignoring characters You can tell any validator to ignore certain characters by using the attribute data-validation-ignore (comma separated list). ```How much do you want to donate?
``` ## Security validators< ### Password confirmation This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix. ```Password (at least 8 characters) Confirm password
``` ```E-mail Repeat e-mail
``` ### Password strength Use this validator to make sure that your user has a strong enough password. Set attributedata-validation-strength to 1, 2 or 3 depending on how strong password you require.
If you want the strength of the password to be displayed while the user types you call displayPasswordStrength() in the end of the form.
```
```
### Server side validation
By using this validator you can validate the value given by the user on the server before the form gets submitted. The validation function will send a POST request to the URL declared in data-validation-url. The argument posted to the URL will have the same name as the input being validated.
The form will get the class validating-server-side while the server is being requested.
The response from the validation script must be a JSON formatted object, containing the properties "valid" and "message".
```
{
"valid" : true|false,
"message" : "String with text that should be displayed as error message"
}
```
#### Form
```
```
#### /validate-input.php
```
false,
'message' => 'Post argument "user" is missing.'
);
if( isset($_POST['user']) ) {
$userRepo = new UserRepository( DataStorage::instance() );
$user = $userRepo->loadUser( $_POST['user'] );
if( $user ) {
// User name is registered on another account
$response = array('valid' => false, 'message' => 'This user name is already registered.');
} else {
// User name is available
$response = array('valid' => true);
}
}
echo json_encode($response);
```
**Modifying the server request**
The parameter containing the input value, sent to the server, will by default have the same name as the input. You can however set your own parameter name by using the attribute data-validation-param-name. You can also send along other parameters to the server by using the attribute data-validation-req-params.
```
$user->get('ID')));
?>
E-mail:
``` ### Credit card validation This validator makes it possible to validate any of the credit cards VISA, Mastercard, Diners club, Maestro, CJB, Discover and American express ``` <-- Accept credit card number from Visa, Mastercard and American Express -->Credit card number
Security code (cvv)
``` You can also let the user choose a credit card and programmatically change the allowed credit card on the input of the card number. ```Credit card
Credit card number
...``` You can also use the setup function to configure the recaptcha service. ``` $.validate({ reCaptchaSiteKey: '...', reCaptchaTheme: 'light' }); ``` ### Letters and numbers By using the validator
letternumeric you can validate that given input value only contains letters and/or numbers. This validator allows any type of character in contrast to the alphanumeric validator, which only allows letters A-Z.
```
```
## Date validators
### Birthdate
This validator is the same as the default date validator except that it only allows past dates and dates that is not older than 120 years.
```
```
## Time
```
```
## Location validators
### Country
```
```
### State (US)
```
```
### Longitude and Latitude
```
```
### Suggest country/state
By using this function you'll make it easier for your visitor to input a country or state.
```
data-validation-allowing exists in the mime type declaration of the file. This means that data-validation-allowing="pdf" will work in both modern browsers (checking against "application/pdf") and older browsers (checking the file extension ".pdf").
```
```
Validating multiple files (with separate error messages depending on failed validation):
```
```
### Image dimension and ratio
Use the validator dimension to check the dimension of an image (jpg, gif or png).
```
```
Use the attribute data-validation-ratio to validate that the uploaded image has a certain ratio
```
```
## Logic
### Validators depending on each other
Use the attributes data-validation-depends-on to configure that an input is optional as long as another input is left without an answer.
```
Contact me:
E-mail:
``` ```Country:
State:
