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.

<head>
  <link rel="stylesheet" href="deregexvalidation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="deregexvalidation.min.js"></script>
</head>

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.

<form class="form-1" novalidate>
  <div class="form-row">
    <label>First name: <input type="text" data-validation-cfg="letters_special" required>
    </label>
  </div>
  <div class="form-row">
    <label>Enter your number: <input type="text" data-validation-cfg="digits_only" required>
    </label>
  </div>
  <div class="form-row-submit">
    <button type="button">submit</button>
  </div>
</form>

Activate validation plugin in JS

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

'use strict';

(function ($, window, document, undefined) {

  $(function () {

    function initDeRegexValidation() {
      $('.form-1').deRegexValidation({
        preventSubmitOnInvalid: true,
        disableFormOnInvalid: true,
        validateRequiredFields: true,
      });
    }

    initDeRegexValidation();

  });

})(jQuery, window, document);

Try the result:


Options

Option name Accepted values Default value Description
eventNamespace string
'deRegexValidation'
Event namespace
events string[]
[ 'input', 'change', 'blur' ]
Array of events names which plugin will be listen to
dataAttrs object
{
  validationCfgs: 'validation-cfg'
}
validationCfgs - data attribute name with validations configs that is attached to input field
cssClasses object
{
  formValid: 'form-valid',
  formInvalid: 'form-invalid',
  inputValid: 'input-valid',
  inputInvalid: 'input-invalid',
  noticeIndex: 'validation-notice-',
}
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
{
  inputParent: '.form-row',
}
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.
{
  name: 'from_1_to_5',
  regex: /^[1-5]?$/,
  notice: 'Please provide number from 1 to 5'
}
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.

{
  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',
},

Here are all options in one place

{
  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: {},
}

Methods

Method usage example
... plugin has been already initialized ...

//method call example
$('.form-1').deRegexValidation('methodName', methodArg);

//real example
$('.form-1').deRegexValidation('validateForm', true);
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
$('.form-1').deRegexValidation({
...
...rest options...
...
  on: {
    init: function(form){
      ...your logic on init...
    }
  }
});
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

<form class="form-2" novalidate>
  <div class="form-row">
    <label>First name: <input type="text" data-validation-cfg="letters_special">
    </label>
  </div>
  <div class="form-row">
    <label>Your number: <input type="text" data-validation-cfg="digits_only">
    </label>
  </div>
  <div class="form-row">
    <label>Your email: <input type="text" data-validation-cfg="email">
    </label>
  </div>
  <div class="form-row">
    <label>Your street: <input type="text" data-validation-cfg="letters_digits_special_2">
    </label>
  </div>
  <div class="form-row-submit">
    <button type="submit">submit</button>
  </div>
</form>

Javascript

'use strict';

(function ($, window, document, undefined) {

  $(function () {

    function initDeRegexValidation() {
      $('.form-2').deRegexValidation();
    }

    initDeRegexValidation();

  });

})(jQuery, window, document);

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

<form class="form-3" novalidate>
  <div class="form-row">
    <label>First name: <input type="text" data-validation-cfg="[&quot;required&quot;,{&quot;name&quot;:&quot;from_1_to_5&quot;,&quot;regex&quot;:&quot;\/^[1-5]?$\/&quot;,&quot;notice&quot;:&quot;Please provide number from 1 to 5&quot;}]">
    </label>
  </div>
  <div class="form-row-submit">
    <button type="submit">submit</button>
  </div>
</form>

Attribute data in JSON

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

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:

<?php
$validation_rules = array(
//use provided configs by name
  'required',
//add your own
  array(
    'name'  => "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);
//[&quot;required&quot;,{&quot;name&quot;:&quot;from_1_to_5&quot;,&quot;regex&quot;:&quot;\/^[1-5]?$\/&quot;,&quot;notice&quot;:&quot;Please provide number from 1 to 5&quot;}]
  

Javascript

'use strict';

(function ($, window, document, undefined) {

  $(function () {

    function initDeRegexValidation() {
      $('.form-3').deRegexValidation();
    }

    initDeRegexValidation();

  });

})(jQuery, window, document);

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

<form class="form-4" novalidate>
  <div class="form-row">
    <label>Enter letters: <input type="text" data-validation-cfg="[{&quot;name&quot;:&quot;required&quot;,&quot;notice&quot;:&quot;Required in your custom language&quot;},{&quot;name&quot;:&quot;letters&quot;,&quot;notice&quot;:&quot;Only letters in your custom language&quot;}]">
    </label>
  </div>
  <div class="form-row-submit">
    <button type="submit">submit</button>
  </div>
</form>

Attribute data in JSON

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

Javascript

'use strict';

(function ($, window, document, undefined) {

  $(function () {

    function initDeRegexValidation() {
      $('.form-3').deRegexValidation();
    }

    initDeRegexValidation();

  });

})(jQuery, window, document); 

Result