Flexible HTML5 Form Field Validation Plugin With jQuery - xvalidation

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:

• Bootstrap 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">Name</label>
  <input id="name" type="text" placeholder="Name" data-validation="text" data-content="Name cannot be empty" >
</div>
<!--No class validator-->
<div class="input-field">
  <label for="surname">Surname</label>
  <input id="surname" type="text" placeholder="Surname (Optional)" data-optional="true" data-validation="text" data-content="Surname cannot be empty">
</div>
<!--Email validator-->
<div class="input-field">
  <label for="email">Email</label>
  <input id="email" type="text" data-validation="email" placeholder="email" data-content="Email has a invalid format" >
</div>
<!--Password validator-->
<div class="input-field">
  <label for="password">Password</label>
  <input id="password" type="password" class="validate" data-validation="password" 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 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.

$("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({

  // validates phone number with telInput
  telInput: false,

  // 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",

  // show errors below input
  notification: true,

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

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.