Flexible HTML5 Form Field Validation Plugin With jQuery Validati - Download Flexible HTML5 Form Field Validation Plugin With jQuery - xvalidation

Download Flexible HTML5 Form Field Validation Plugin With jQuery – xvalidation

By Posted on

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.

Flexible HTML5 Form Field Validation Plugin With jQuery Validati - Download Flexible HTML5 Form Field Validation Plugin With jQuery - xvalidation
File Size: 11 KB
Views Total: 5279
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

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.

view source
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.

view source
01 <!--Text validator-->
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" >
05 </div>
06 <!--No class validator-->
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">
10 </div>
11 <!--Email validator-->
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" >
15 </div>
16 <!--Password validator-->
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">
20 </div>
21 <div class="input-field">
22   <button type="submit">Submit</button>
23 </div>

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.

view source
1 $("form").xvalidation();

5. Validate the entire form fields on submit.

view source
1 $("form").submit(function (evt) {
2   evt.preventDefault();
3   evt.stopPropagation();
4   if ($("form").data().Validati.methods.validate()) {
5       alert("Do something");
6   }
7   return false;
8 });

6. Possible options for the form validation plugin.

view source
01 $("form").xvalidation({
02  
03   // validates phone number with telInput
04   telInput: false,
05  
06   // an array of objects used for custom validation rules.
07   // e.g. array[{"class":"val1", "validation":function}]
08   customValidations: [],
09  
10   // default error message
11   defaultText: "Invalid Format",
12  
13   // form fields to validate
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]",
15  
16   // true = hightlight the parent container instead of the current field
17   parentContainer: false,
18  
19   // enable HTML5 form validation
20   html5Validation: false,
21  
22   // CSS class
23   errorClass: "error",
24  
25   // show errors below input
26   notification: true,
27  
28   // materialize | bootstrap | bulma | none
29   theme: "bootstrap"
30    
31 });

Changelog:

2019-02-20

  • JS update
  • Doc update
  • Renamed to xvalidation

2017-05-18

  • JS update

This awesome jQuery plugin is developed by robextrem. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: