jquery.csssr.validation

jquery.csssr.validation
=======================

jquery.csssr.validation is an universal validation plugin, which requires zero JS code to validate the forms on your project. Simply connect it, add a couple of attributes to your forms and here you go, it does all you need.

``bower i jquery.csssr.validation``npm i jquery.csssr.validation`-------------- Important: If haven't done it yet, please upgrade to version 0.0.26, it contains an important fix for the URL validation. The regular expression^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-])\/?$ was vulnerable to REDOS, so it was replaced with a function which uses the URL API and checks the protocol to match http(s):. Thanks to James Davis for the finding. Also consider upgrading your own projects if you reused the mentioned regular expression anywhere else. -------------- 1. Quickstart 2. Validation Features - Checking for empty values - Validation based on patterns - Email validation - Url validation - Defining custom patterns - Patterns for individual fields - Reusable global patterns - Inverting patterns - Using functions instead of patterns - Input length validation - Validating min and max values of numeric fields - Linking fields to check for equal values - Allowing empty values - Integrating with masking plugins - Filtering input - Cyrillic-only fields - Numeric-only fields - Letters-only fields - Latin-only fields - Defining custom input patterns - Input patterns for individual fields - Reusable global input patterns - Inverting input patterns - Using filter functions instead of input patterns 3. Visualizing validation results - Adding CSS classes - Defining targets the CSS classes will be added to - Using a different CSS class for textarea or select - Adding CSS classes on invalid or empty values - Adding CSS classes on valid values - Defining when the classes will be removed - Displaying text messages - Defining targets the messages will be displayed in - Displaying messages for empty values - Displaying messages for invalid values 4. Understanding validation events 5. Silent validation 6. Custom validation containers and validation with multiple steps 7. Global plugin configuration 8. Overriding of global options - Overriding in forms or validation containers - Overriding in individual fields 9. Options reference

`$3`





Let's begin with a simple registration form with four fields: username, email, password and password confirmation.



1. To initialize the plugin, add the

data-validate

 attribute to your form.

2. Add the

required

 attribute to the fields you want to be checked for empty values.

3. Set the type of the email field to

.

4. Using the

data-invalid-class

 attribute, define the CSS class which will be added to the field when its value is empty.

5. Link the password & password confirmation fields with the

data-equal-to

 attribute:

html

    id="frmRegister"

    action="#"

    method="post"

    data-validate

    data-invalid-class="invalid">





Now, once the form is submitted, the validation plugin will be called and your form is being validated before it is submitted. Keep in mind, that you don't need to add the

novalidate

 attribute to turn off browser validation - it will be added automatically once the plugin is initialized.



See it live on JSFiddle





$3



#### Checking for empty values



Add the

required

 attribute to a field to make the plugin check if a value is filled in.

html





If you don't like to use the

required attribute, you can add the js-required

 class to your field also.

html





Don't like the class either, or integrating with existing code? You can override the selector for looking for required fields by adding the

data-required-selector

 attribute to your form, putting any jQuery selector there.

html





#### Validation based on patterns



Out of the box, the plugin allows you to validate a field value based on a pattern. There are two pre-configured patterns: email and url. You can also define any number of custom patterns.



##### Email validation



The built-in validation pattern for emails is using the following regex:



/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zа-яёії\-0-9]+\.)+[a-zа-яёії]{2,}))$/i





To make it work, simply set the type of your input to

html





##### Url validation



The built-in validation pattern for urls is using the following regex:



/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-])\/?$/i





To make it work, simply set the type of your input to

url

html





#### Input length validation



Sometimes you need to validate the length of the string the user has filled in a field. Use the

minlength and maxlength attributes to achieve the correct behavior. Should you set the maxlength

 attribute, the library will also take care of that the user cannot input more characters than required:

html





See it live on JSFiddle



#### Validating min and max values of numeric fields



Should you have a numeric field, mostly two things are required - limiting the characters to numeric only, as well as setting the minimum and maximum allowed values. Set the

inputmode attribute of your field to numeric and use the min and max

 attributes to limit the number range. Should the user input a value below or above the given limits, the plugin will automatically correct the entered value.

html





See it live on JSFiddle



#### Linking fields to check for equal values



A common practice in registration forms is to ask the user to input his password twice and validate if the values in both password fields match. The plugin can help you to easily link two fields with each other using the

data-equal-to

 attribute, which accepts a selector as its value:

html





See it live on JSFiddle



#### Allowing empty values



You have a field you need be validated when the user has entered a value and still allow empty values? Use the

data-allow-empty

 attribute.

html

``

See it live on JSFiddle

**

`$3`





Let's begin with a simple registration form with four fields: username, email, password and password confirmation.



1. To initialize the plugin, add the

data-validate

 attribute to your form.

2. Add the

required

 attribute to the fields you want to be checked for empty values.

3. Set the type of the email field to

.

4. Using the

data-invalid-class

 attribute, define the CSS class which will be added to the field when its value is empty.

5. Link the password & password confirmation fields with the

data-equal-to

 attribute:

html

    id="frmRegister"

    action="#"

    method="post"

    data-validate

    data-invalid-class="invalid">





Now, once the form is submitted, the validation plugin will be called and your form is being validated before it is submitted. Keep in mind, that you don't need to add the

novalidate

 attribute to turn off browser validation - it will be added automatically once the plugin is initialized.



See it live on JSFiddle





$3



#### Checking for empty values



Add the

required

 attribute to a field to make the plugin check if a value is filled in.

html





If you don't like to use the

required attribute, you can add the js-required

 class to your field also.

html





Don't like the class either, or integrating with existing code? You can override the selector for looking for required fields by adding the

data-required-selector

 attribute to your form, putting any jQuery selector there.

html





#### Validation based on patterns



Out of the box, the plugin allows you to validate a field value based on a pattern. There are two pre-configured patterns: email and url. You can also define any number of custom patterns.



##### Email validation



The built-in validation pattern for emails is using the following regex:



/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zа-яёії\-0-9]+\.)+[a-zа-яёії]{2,}))$/i





To make it work, simply set the type of your input to

html





##### Url validation



The built-in validation pattern for urls is using the following regex:



/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-])\/?$/i





To make it work, simply set the type of your input to

url

html





#### Input length validation



Sometimes you need to validate the length of the string the user has filled in a field. Use the

minlength and maxlength attributes to achieve the correct behavior. Should you set the maxlength

 attribute, the library will also take care of that the user cannot input more characters than required:

html





See it live on JSFiddle



#### Validating min and max values of numeric fields



Should you have a numeric field, mostly two things are required - limiting the characters to numeric only, as well as setting the minimum and maximum allowed values. Set the

inputmode attribute of your field to numeric and use the min and max

 attributes to limit the number range. Should the user input a value below or above the given limits, the plugin will automatically correct the entered value.

html





See it live on JSFiddle



#### Linking fields to check for equal values



A common practice in registration forms is to ask the user to input his password twice and validate if the values in both password fields match. The plugin can help you to easily link two fields with each other using the

data-equal-to

 attribute, which accepts a selector as its value:

html





See it live on JSFiddle



#### Allowing empty values



You have a field you need be validated when the user has entered a value and still allow empty values? Use the

data-allow-empty

 attribute.

html

``

See it live on JSFiddle

**