--- layout: default ---

Getting started

Load Jquery and include plugin files

After you download Jquery, load plugin files and include them in your page. To get initial styles you should load plugin CSS file. Bare in mind that validation plugin doesn't care about general design of form or fields and you have to do it in your own CSS files.

{% highlight html %} {% endhighlight %}

Also you can use another versions of Jquery. jQuery Core >= 2.2.4 or jQuery Core >= 1.12.4 should work as well

Quick and simple example

Requires data attribute with comma separated validation config names

Set up your HTML.

You should know that plugin requires all fields to have parent elements with predefined CSS class. In this example it is form-input class. You can always specify your own parent selector through the plugin settings.

{% highlight html %}
{% endhighlight %}

Activate validation plugin in JS

Add this snippet into your page or include it as a file.

{% highlight javascript %} 'use strict'; (function ($, window, document, undefined) { $(function () { function initDeRegexValidation() { $('.form-1').deRegexValidation({ preventSubmitOnInvalid: true, disableFormOnInvalid: true, validateRequiredFields: true, }); } initDeRegexValidation(); }); })(jQuery, window, document); {% endhighlight %}

Try the result:


Options

Option name Accepted values Default value Description
eventNamespace string {% highlight javascript %}'deRegexValidation'{%endhighlight%} Event namespace
events string[] {% highlight javascript %}[ 'input', 'change', 'blur' ]{%endhighlight%} Array of events names which plugin will be listen to
dataAttrs object {% highlight javascript %} { validationCfgs: 'validation-cfg' }{% endhighlight %}
validationCfgs - data attribute name with validations configs that is attached to input field
cssClasses object {% highlight javascript %} { formValid: 'form-valid', formInvalid: 'form-invalid', inputValid: 'input-valid', inputInvalid: 'input-invalid', noticeIndex: 'validation-notice-', }{% endhighlight %}
formValid - CSS class that attaches to form when form is valid
formInvalid - CSS class that attaches to form when form is invalid
inputValid - CSS class that attaches to input field when input field is valid
inputInvalid - CSS class that attaches to input field when input field is inputInvalid
noticeIndex - part of the CSS class that will be appended with index and will be attached to notice message. Hyphen in the end of the CSS class is required
selectors object {% highlight javascript %} { inputParent: '.form-row', }{% endhighlight %}
inputParent - jQuery selector that will find parent element of the input field. It is used to place notices.
noticeTagName string 'p' Tag name that will be used to create notices. You can specify 'div' or whatever tag fits your code.
preventSubmitOnInvalid boolean false If it is true each time invalid form is submitted plugin will apply event.preventDefault() method to prevent invalid form submission.
disableFormOnInvalid boolean false If it is true each button or input with type="submit" or every button without attribute type will be disabled until form is valid.
validateRequiredFields boolean false If it is true each input field with required attribute will be validated by a plugin config.
userValidationCfgs userValidationCfg[] [ ]
You can provide your custom validation configs supplying them as objects. Here is an example of the possible custom validation config that you could add to userValidationCfgs array.
{% highlight javascript %} { name: 'from_1_to_5', regex: /^[1-5]?$/, notice: 'Please provide number from 1 to 5' }{% endhighlight %}
Also you can override any default validation config by providing your object with the same config name and with changed properties . So you can easily put multilanguage support by changing only notice according to your language.
These properties are required:
name
regex
notice

Default validation rules

Here you can see all default validation rules that you can add in userValidationCfgs. Don't forget that you can easily override desired properties of each rule providing object with certain name of the rule and other properties to override defaults.

{% highlight javascript %} { name: 'letters', regex: /^[a-zA-Z]*$/, notice: 'Only letters' }, { name: 'letters_special', regex: /^[a-zA-Z\/\-\s]*$/, notice: 'Only letters, spaces / -' }, { name: 'letters_special_2', regex: /^[a-zA-Z\/\-\s\.\,]*$/, notice: 'Only words, spaces / - , .' }, { name: 'digits_only', regex: /^\d*$/, notice: 'Digits only' }, { name: 'digits9', regex: /^([0-9]{9})?$/, notice: 'Exactly 9 digits' }, { name: 'digits10', regex: /^([0-9]{10})?$/, notice: 'Exactly 10 digits' }, { name: 'number', regex: /^\-?([1-9]+|0[.,]\d+|[1-9]+?[.,]\d+)$/, notice: 'Provide valid number', }, { name: 'digits_and_separators_only', regex: /^[\d.,]*$/, notice: 'Digits and separators only' }, { name: 'letters_digits_only', regex: /^[a-zA-Z0-9]*$/, notice: 'Only letters, digits, space and -' }, { name: 'letters_digits_special', regex: /^[a-zA-Z\/\-\s0-9]*$/, notice: 'Only letters, digits, space / -' }, { name: 'letters_digits_special_2', regex: /^[a-zA-Z\/\-\,\.\s0-9]*$/, notice: 'Only letters, digits, space / - , .' }, { name: 'email', regex: /^(\S+@\S+\.\S{2,})?$/, notice: 'Provide valid email' }, { name: 'required', regex: /^.+$/, notice: 'This field is required' }, { name: 'password_6', regex: /^(.{6,})?$/, notice: 'Password requires at least 6 symbols' }, { name: 'phone', regex: /^(\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{5,14})?$/, notice: 'Provide phone in the international format' }, { name: 'hex_value', regex: /^(#?[0-9a-f]*)?$/, notice: 'Provide valid hex value' }, { name: 'rgb_color_value', regex: /^(rgb\(\s?(1[0-9]{2}|[0-9]|[1-9][0-9]|2([0-4][0-9]|5[0-5]))\s?\,\s?(1[0-9]{2}|[0-9]|[1-9][0-9]|2([0-4][0-9]|5[0-5]))\s?\,\s?(1[0-9]{2}|[0-9]|[1-9][0-9]|2([0-4][0-9]|5[0-5]))\s?\))?$/, notice: 'Provide valid rgb color', }, { name: 'rgba_color_value', regex: /^(rgba\(\s?(1[0-9]{2}|[0-9]|[1-9][0-9]|2([0-4][0-9]|5[0-5]))\s?\,\s?(1[0-9]{2}|[0-9]|[1-9][0-9]|2([0-4][0-9]|5[0-5]))\s?\,\s?(1[0-9]{2}|[0-9]|[1-9][0-9]|2([0-4][0-9]|5[0-5]))\s?\,\s?([01]|0\.([1-9]|[0-9][1-9]))\s?\))?$/, notice: 'Provide valid rgba color', }, { name: 'hsl_color_value', regex: /^(hsl\(\s?([1-9]?[0-9]|[12][0-9]{2}|3([0-5][0-9]|60))\s?\,\s?([1-9]?[0-9]|100)%\s?\,\s?([1-9]?[0-9]|100)%\s?\))?$/, notice: 'Provide valid hsl color', }, { name: 'hsla_color_value', regex: /^(hsla\(\s?([1-9]?[0-9]|[12][0-9]{2}|3([0-5][0-9]|60))\s?\,\s?([1-9]?[0-9]|100)%\s?\,\s?([1-9]?[0-9]|100)%\,\s?(1|0|0\.[0-9]+?)\s?\))?$/, notice: 'Provide valid hsla color', }, {% endhighlight %}

Here are all options in one place

{% highlight javascript %} { eventNamespace: 'deRegexValidation', events: ['input', 'change', 'blur'], dataAttrs: { validationCfgs: 'validation-cfg', }, cssClasses: { formValid: 'form-valid', formInvalid: 'form-invalid', inputValid: 'input-valid', inputInvalid: 'input-invalid', noticeIndex: 'validation-notice-', }, selectors: { inputParent: '.form-row', }, noticeTagName: 'p', preventSubmitOnInvalid: false, disableFormOnInvalid: false, validateRequiredFields: false, userValidationCfgs: [], on: {}, }{% endhighlight %}

Methods

Method usage example
{% highlight javascript %} ... plugin has been already initialized ... //method call example $('.form-1').deRegexValidation('methodName', methodArg); //real example $('.form-1').deRegexValidation('validateForm', true);{% endhighlight %}
Method name Arguments Default arguments Description
validateForm boolean false
scrollToInvalid - provide true to first argument to enable scrolling to first highest invalid field after fields validation
destroy - - Destroys current instance of the plugin

Events

Events subscription example
{% highlight javascript %} $('.form-1').deRegexValidation({ ... ...rest options... ... on: { init: function(form){ ...your logic on init... } } });{% endhighlight %}
Event name Arguments Description
init 1. form - jQuery object Fires after plugin initialization
beforeFieldValidation
1. form - jQuery object
2. input - jQuery object
Fires before input validation
afterFieldValidation
1. form - jQuery object
2. input - jQuery object
Fires after input validation
validFormSubmit 1. form - jQuery object Fires during valid form submission
invalidFormSubmit 1. form - jQuery object Fires during invalid form submission
beforeDestroy 1. form - jQuery object Fires before current plugin instance destruction

Examples

Basic

HTML

{% highlight html %}
{% endhighlight %}

Javascript

{% highlight javascript %} 'use strict'; (function ($, window, document, undefined) { $(function () { function initDeRegexValidation() { $('.form-2').deRegexValidation(); } initDeRegexValidation(); }); })(jQuery, window, document); {% endhighlight %}

Result

Custom validation configs

In this example we are going to add our custom validation config though HTML layout

HTML attribute data-validation-cfg - is the same as userValidationCfgs provided through Javascript

HTML

{% highlight html %}
{% endhighlight %}

Attribute data in JSON

{% highlight javascript %} [ "required", { "name": "from_1_to_5", "regex":"\/^[1-5]?$\/", "notice":"Please provide number from 1 to 5" } ] {% endhighlight %}

In order to prevent undesired code behavior you should always ESCAPE all your HTML attributes data before insertion.

Let's take a look at PHP example on how to escape the attribute's data:

{% highlight php %} "from_1_to_5", 'regex' => "/^[1-5]?$/", 'notice'=> "Please provide number from 1 to 5", ), ); $validation_rules = json_encode($validation_rules); $validation_rules = htmlspecialchars($validation_rules,ENT_QUOTES); //["required",{"name":"from_1_to_5","regex":"\/^[1-5]?$\/","notice":"Please provide number from 1 to 5"}] {% endhighlight %}

Javascript

{% highlight javascript %} 'use strict'; (function ($, window, document, undefined) { $(function () { function initDeRegexValidation() { $('.form-3').deRegexValidation(); } initDeRegexValidation(); }); })(jQuery, window, document); {% endhighlight %}

Result

Multilingual messages

To use this plugin with other languages than English you can override default messages or provide your own custom validation configs.

HTML

{% highlight html %}
{% endhighlight %}

Attribute data in JSON

{% highlight json %} [ { "name": "required", "notice": "Required in your custom language" }, { "name": "letters", "notice": "Only letters in your custom language" } ]{% endhighlight %}

Javascript

{% highlight javascript %} 'use strict'; (function ($, window, document, undefined) { $(function () { function initDeRegexValidation() { $('.form-3').deRegexValidation(); } initDeRegexValidation(); }); })(jQuery, window, document); {% endhighlight %}

Result