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.
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
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.
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 %}