This time I will share jQuery Plugin and tutorial about Flexible HTML5 Form Field Validation Plugin With jQuery – xvalidation, hope it will help you in programming stack.
xvalidation is a lightweight and flexible jQuery client-side form validation plugin which highlights invalid form fields and displays custom error messages using CSS classes and HTML5 data
attributes.
Works perfectly with Materialize, Bootstrap, and Bulma CSS frameworks.
More example:
How to use it:
1. Load both jQuery JavaScript library and the jQuery xvalidation plugin’s script in your web project.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "js/xvalidation.js" ></ script > |
2. Add the validation rules as CSS classes to your html form and specify the custom error message using the data-content
attribute as shown below.
02 |
< div class = "input-field" > |
03 |
< label for = "name" >Name</ label > |
04 |
< input id = "name" type = "text" placeholder = "Name" data-validation = "text" data-content = "Name cannot be empty" > |
07 |
< div class = "input-field" > |
08 |
< label for = "surname" >Surname</ label > |
09 |
< input id = "surname" type = "text" placeholder = "Surname (Optional)" data-optional = "true" data-validation = "text" data-content = "Surname cannot be empty" > |
12 |
< div class = "input-field" > |
13 |
< label for = "email" >Email</ label > |
14 |
< input id = "email" type = "text" data-validation = "email" placeholder = "email" data-content = "Email has a invalid format" > |
17 |
< div class = "input-field" > |
18 |
< label for = "password" >Password</ label > |
19 |
< input id = "password" type = "password" class = "vali<a href=" https://www.jqueryscript.net/time-clock/">date</ a >" data-validation="password" data-content="At least 8 characters, 1 Digit, 1 Uppercase character and 1 special character." placeholder="Password"> |
21 |
< div class = "input-field" > |
22 |
< button type = "submit" >Submit</ button > |
3. Validation rules which can be passed via data-validation
attribute:
- text: only text
- select: non-empty select
- noempty: non-empty
- alphanumeric: letters and digits
- numericonly: only digits
- numericorempty: empty or has digits
- date: date [YYYY-mm-dd]
- phone: phone number
- email: email
- address: address
- zip: Zip Code
- password: at least 8 characters, 1 Digit, 1 Uppercase character and 1 special character
- url: URL
- domain: internet domain
- rfc: Mexican Tax ID
- samepassword, samepassword2: Field 1 and Field 2 are the same
4. Call the function on the form element to active the live validation on the form fields when user is typing.
1 |
$( "form" ).xvalidation(); |
5. Validate the entire form fields on submit.
1 |
$( "form" ).submit( function (evt) { |
4 |
if ($( "form" ).data().Validati.methods.validate()) { |
6. Possible options for the form validation plugin.
01 |
$( "form" ).xvalidation({ |
08 |
customValidations: [], |
11 |
defaultText: "Invalid Format" , |
14 |
fields: "select,textarea,input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=datetime-local],input[type=date],input[type=url]" , |
17 |
parentContainer: false , |
20 |
html5Validation: false , |
Changelog:
2019-02-20
- JS update
- Doc update
- Renamed to xvalidation
2017-05-18
This awesome jQuery plugin is developed by robextrem. For more Advanced Usages, please check the demo page or visit the official website.