Flexible HTML5 Form Field Validation Plugin With jQuery - xvalidation

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

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.

<script src="//code.jquery.com/jquery.min.js"></script>
<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.

<!--Text validator-->
<div class="input-field">
  <label for="name" data-error="wrong" data-success="OK">Name</label>
  <input id="name" type="text" placeholder="Name" class="validate text-validation" data-content="Name cannot be empty" >
</div>
<!--No class validator-->
<div class="input-field">
  <label for="surname" data-error="wrong" data-success="OK">Surname</label>
  <input id="surname" type="text" placeholder="Surame" class="validate text-validation">
</div>
<!--Email validator-->
<div class="input-field">
  <label for="email" data-error="wrong" data-success="OK">Email</label>
  <input id="email" type="email" placeholder="email" class="validate email-validation" data-content="Email has a invalid format" >
</div>
<!--Password validator-->
<div class="input-field">
  <label data-success="OK" for="password" >Password</label>
  <input id="password" type="password" class="validate password-validation" data-content="At least 8 characters, 1 Digit, 1 Uppercase character and 1 special character." placeholder="Password">
</div>
<div class="input-field">
  <button type="submit">Submit</button>
</div>

3. Validation rules (CSS classes) available:

  • text-validation: only text
  • select-validation: non-empty select
  • empty-validation: empty content
  • alphanumeric-validation: letters and digits
  • numericonly-validation: only digits
  • numericorempty-validation: empty or has digits
  • date-validation: date [YYYY-mm-dd]
  • phone-validation: phone number
  • email-validation: email
  • address-validation: address
  • zip-validation: Zip Code
  • password-validation: at least 8 characters, 1 Digit, 1 Uppercase character and 1 special character
  • url-validation: URL
  • domain-validation: internet domain
  • rfc-validation: Mexican Tax ID
  • samepassword-validation, samepassword2-validation: 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.

$("form").xvalidation();

5. Validate the entire form fields on submit.

$("form").submit(function (evt) {
  evt.preventDefault();
  evt.stopPropagation();
  if ($("form").data().Validati.methods.validate()) {
      alert("Do something");
  }
  return false;
});

6. Possible options for the form validation plugin.

$("form").xvalidation({

  // an array of objects used for custom validation rules.
  // e.g. array[{"class":"val1", "validation":function}]
  customValidations: [],

  // default error message
  defaultText: "Invalid Format",

  // form fields to validate
  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]",

  // true = hightlight the parent container instead of the current field
  parentContainer: false,

  // enable HTML5 form validation
  html5Validation: false,

  // CSS class
  errorClass: "error",

  // //materialize | bootstrap | none
  theme: "bootstrap"
  
});

Change log:

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.