jQuery Plugin For Custom HTML5 Form Validation Messages - html5cvm

File Size: 43.3 KB
Views Total: 3367
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Custom HTML5 Form Validation Messages - html5cvm

html5cvm is a lightweight jQuery plugin for replacing the default HTML5 form validation messages that supports numerious validation types like email, empty field, required field, and much more. Dual licensed under the GPL and MIT licenses

How to use it:

1. To get started, we first need to include jQuery library and the jQuery html5cvm plugin on the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.html5cvm.min.js"></script>

2. Then Initialize the plugin on the target form and we're ready to go.

$('form').html5cvm();

3. Customize the form validation messages via HTML5 data-error-OPTION attributes.

  • data-error-value-missing: validation message if the element has no value but is a required field.
  • data-error-type-mismatch: validation message if the element’s value doesn't match its type attribute.
  • data-error-pattern-mismatch: validation message if the element’s value doesn't match its pattern attribute.
  • data-error-too-long: validation message if the element’s value exceeds its maxlength attribute.
  • data-error-range-underflow: validation message if the element’s value is lower than its min attribute.
  • data-error-range-overflow: validation message if the element’s value is higher than its max attribute.
  • data-error-step-mismatch: validation message if the element’s value is invalid per its step attribute.
  • data-error-generic: This is a fall back generic message that you can provided.
<input 
    type="email" 
    id="email"
    placeholder="Your Email Address" 
    required="required"
    data-error-type-mismatch="Message for unvalid email address" 
    data-error-value-missing="Message for empty input"
>

4. You can also pass the options via JavaScript during initialization.

$('form').html5cvm({
  valueMissing: null,
  typeMismatch: null,
  patternMismatch: null,
  tooLong: null,
  rangeUnderflow: null,
  rangeOverflow: null,
  stepMismatch: null,
  generic: null
});

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