+ Average points
+
+
+ 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 + +
+... + + ``` -Inline error messages is also possible. If you add attribute data-validation-error-msg to an element the value of that attribute will be displayed instead of the error dialog that the validation function referrs to. +### Simple captcha -## Simple captcha example -```php +``` - -.... - -... - ``` -## Input length restriction -```html +### Google reCAPTCHA + +Use this validator if wanting to integrate the Google service reCAPTCHA. + +```- History (50 characters left) - +
- + + ``` -## Password confirmation example -```html -Password:
-Confirm password:
+## File validators + +### File size + +This validation is only supported by Internet Explorer 10, Mozilla FireFox v >= 3.6 and any of the later versions of webkit based browsers. + +``` + + + + + +``` + +### File type + +This validation will fall back on checking the file extension in older browsers. In modern browsers the validation will check that any of the extensions indata-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: + +
+ +... + + + +``` + +### Require only one out of several inputs + +Use the attributedata-validation-optional-if-answered to tell the validator that only one, out of a group of inputs, requires an answer.
+
+```
++ Home phone number: + +
++ Cell phone number: + +
++ Work phone number: + +
+ +``` + +## Changelog + +#### 2.3.19 +- New translations (Polish, Romanian, Danish, Norwegian, Dutch, Czech, Russian, Italian) +- Several improvements made to already existing translations +- "Validation help" no longer puts constraints on input names +- Improved confirmation validation +- Config parameter `errorMessagePosition` is now only used to point out where error message should be placed. New configuration parameters is introduced that handles custom positioning of error messages [#226](https://github.com/victorjonsson/jQuery-Form-Validator/issues/226#issuecomment-191233456) +- Now possible to add `data-validation-ignore` to filter out certain characters before validation +- New sanitation method `strip` that removes defined characters +- Now possible to declare attributes not prefixed with data-validation in jsconf module +- All inputs gets sanitized on page load when using sanitation module +- Allow dates to omit leading zero using `data-validation-require-leading-zero="false"` +- Module toggleDisabled now acts on value change, not only mouse click +- `data-validation-if-checked` now deprecated, use `data-validation-depends-on` instead [#153](https://github.com/victorjonsson/jQuery-Form-Validator/issues/153) +- Event `beforeValidation` now gets value, language and configuration as arguments and can be used to prevent validation of the input. +- Security module now has a `recaptcha` validator that uses Google reCaptcha 2 +- The plugin is installable using npm (also possible to require validation modules when using browserify) +- Polish validation module +- Brazilian validation module +- UK validation module now also have validators `uknin` `ukutr` +- Sepa-module that makes it possible to validate sepa, iban and bic. +- New module named "logic" containing the features `data-validation-depends-on` and `data-validation-optional-if-answered` + +#### 2.2.8 +- The plugin is now again possible to install via bower. +- Portoguese language pack and validators +- New module used for data-sanitiation +- E-mail addresses now validated in accordance to rfc 6531 +- Now possible to use $.fn.validate to programmatically validate inputs +- Hidden inputs won't get validated by default (can be overriden using option validateHiddenInputs) + + +#### 2.2.43 +- Fixed min/max parse error in HTML5 module +- Now also supports Twitter bootstraps horizontal forms +- This plugin now also distributes a default CSS theme including success/fail icons (used on formvalidator.net) +- Email validation now won't fail if email begins with a number +- This plugin now comes with error dialogs translated to English, French, German, Spanish and English. +- New validator `letternumeric`. Validates that input consists out of any type of letter (not only alphanumeric) and/or numbers +- You can now validate image dimension and ratio +- ... and a bunch of other smaller bug fixes and improvements. + +#### 2.2.0 +* Now possible to define an error message for each validation rule on a certain input (issue #113) +* This plugin now serves as a html5 fallback. You can now use the native attributes to declare which type +of validation that should be applied. +* Use a template for error messages when having errorMessagePosition set to top +* Added validation of credit card number and CVV to the security module +* Event onElementValidate added +* Use the attribute data-validation-confirm to declare which input that should be confirmed when using validation=confirmation (issue #112) +* Validation "required" now supports inputs of type radio +* $.validateForm is now deprecated, use $.isValid instead +* Possible to check if form is valid programmatically without showing error messages +* Select elements can now be validated server-side +* Cleaned up dialog messages +* Various IE8 fixes +* Possible to send along parameters to the server when using server side validation +* Now possible to set your own parameter name when using server side validation +* Improved/simplified URL validation +* ... and a whole lot more small improvements + +#### 2.1.47 +* Incorrect error-styling when using datepicker or suggestions is now fixed +* Incorrect error-styling of select elements is now fixed +* Deprecated function $.validationSetup is now removed, use $.validate() instead +* You can now return an array with errors using the event `onValidate` +* You can now declare an element where all error messages should be placed (config.errorMessagePosition) + +#### 2.1.36 +* Now possible to use the native reset() function to clear error messages and error styling of the input elements + +#### 2.1.34 +* General improvements and bug fixes +* Added events "beforeValidation" and "validation" (see http://formvalidator.net/#configuration_callbacks for more info) + +#### 2.1.27 + * E-mail validation support .eu top domain + * Improvements in server validation + * Now possible to re-initiate the validation. This makes it possible to dynamically change the form and then call $.validate() again to refresh the validation (issue #59) + * Number validation now supports range + +#### 2.1.15 + * E-mail addresses can now contain + symbol + * Correction of the US states in validation "federatestate" + * Fixed bug in server validation + +#### 2.1.09 + * File validation now support multiple files + * Length validation can now be used to validate the number of uploaded files using a file input that supports multiple files + * Validation classes is no longer applied on inputs that for some reason shouldn't become validated + +#### 2.1.08 + * Now possible to configure the decimal separator when validating float values. Use either the + attribute *data-validation-decimal-separator* or the property *decimalSeparator* when +calling $.validate() + * $.validationSetup is renamed to $.validate. You will still be able to initiate the validation by calling + the $.validationSetup but it's considered deprecated. + +#### 2.1.06 + * Modules can now be loaded from remote websites + +#### 2.1.05 + * Fixed language bug (issue #43 on github) + * Validation on server side is now triggered by the blur event + * Now using class names that's compliant with twitter bootstrap 3.x + +#### 2.1 + * Code refactoring and some functions renamed + * Validator "checkbox_group" added + +#### 2.0.7 + * Now possible to validate file size, extension and mime type (using the file module) + +#### 2.0 + * [min|max]_length is removed (now merged with length validation). + * The number, int and float validation is merged together, all three variants is now validated by the number validation. + * Phone validation is moved to "sweden" module and renamed to swephone. + * The attribute to be used when defining the regular expression for custom validations is now moved to its own attribute (data-validation-regexp) + * Length validation now looks at attribute data-validation-length (eg. min5, max200, 3-12). + * The validation rule no longer needs to be prefixed with "validate_" (it's still possible to use the prefix but it's considered deprecated). + * Some validation functions is moved to modules (see the function reference over at http://formvalidator.net). + * Added function $.validationSetup() to reduce the amount of code that has to be written when initiating the form validation. + ## Credits -[Victor Jonsson](https://github.com/victorjonsson)- - https://github.com/victorjonsson/jQuery-Form-Validator/ - -
- -
- <form onsubmit="return $(this).validate()">
- <input data-validation="some_predefined_rule" />
- ...
- </form>
-
-
-