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:
Methods
... 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
$('.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="["required",{"name":"from_1_to_5","regex":"\/^[1-5]?$\/","notice":"Please provide number from 1 to 5"}]">
</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);
//["required",{"name":"from_1_to_5","regex":"\/^[1-5]?$\/","notice":"Please provide number from 1 to 5"}]
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="[{"name":"required","notice":"Required in your custom language"},{"name":"letters","notice":"Only letters in your custom language"}]">
</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