HTML5 Validation Messages

This guide will help you set up the jQuery - HTML5 Custom Validation Messages plugin to help you take full advantage of all its features. All CoalaWeb jQuery plugins are hosted on GitHub so drop by to grab a copy or raise an issue.

Table of Contents

  1. Intro
  2. Quick Start
  3. Adding Messages
  4. Tested
  5. License
  6. Issues?

Intro

HTML5 form validation error messages are supplied by the browser but with this simple jQuery plugin you can customize them to your hearts content. A couple of good examples of when you might want to do this are for translation purposes or to bring them into line with your server-side messages.

Important Info

You can define by ID which form you would like to add your custom messages to as well as several options on how to assign the messages themselves.

Quick Start

  1. Grab a copy.
  2. Included the plugin on your page like this.

    <script type="text/JavaScript" src="/path/to/jquery.html5cvm.min.js" />
    
  3. Call the plugin with the ID of the form you wish to add custom messages to like this.

    $('#form-id').html5cvm();
    

Adding Messages

Option 1 [Individual Fields]

You can add data attributes to your individual input fields to specifically target a message.

Example

<input 
    type="email" 
    id="email"
    placeholder="Please enter your email" 
    required="required"
    data-error-type-mismatch="Sorry only valid email addresses allowed! Please try again" 
    data-error-value-missing="You seem to have forgotten to enter your email!">

You have the follow options:

  1. data-error-value-missing
    • If the element has no value but is a required field.
  2. data-error-type-mismatch
    • If the element’s value doesn't match its type attribute.
  3. data-error-pattern-mismatch
    • If the element’s value doesn't match its pattern attribute.
  4. data-error-too-long
    • If the element’s value exceeds its maxlength attribute.
  5. data-error-range-underflow
    • If the element’s value is lower than its min attribute.
  6. data-error-range-overflow
    • If the element’s value is higher than its max attribute.
  7. data-error-step-mismatch
    • If the element’s value is invalid per its step attribute.
  8. data-error-generic
    • This is a fall back generic message that you can provided.

Option 2 [Plugin Options]

Maybe you have a large form and you would rather define a custom message to be used through out it. You can achieve this by defining the options when you call the plugin.

Example

$('#form-id').html5cvm({
    generic: 'Forgotten something?',
    typeMismatch: "Please enter a valid email!"
});

You have the follow options:

  1. valueMissing
    • If the element has no value but is a required field.
  2. typeMismatch
    • If the element’s value doesn't match its type attribute.
  3. patternMismatch
    • If the element’s value doesn't match its pattern attribute.
  4. tooLong
    • If the element’s value exceeds its maxlength attribute.
  5. rangeUnderflow
    • If the element’s value is lower than its min attribute.
  6. rangeOverflow
    • If the element’s value is higher than its max attribute.
  7. stepMismatch
    • If the element’s value is invalid per its step attribute.
  8. generic
    • This is a fall back generic message that you can provided.

Tested

jQuery

  • jQuery: 1.11.3

Browsers

  • Firefox: 41.0.1
  • Chrome: 45.0.2454.101
  • Opera: 32.0.1948.69
  • IE: 11.0.9600.18015

License

Dual licensed under the MIT and GPL licenses:

Issues

Do you have an issue? Found a bug? Want to request a new feature? Then create a new issue here.

Written by Steven Palmer Monday, 20 July 2015 Posted in Plugins, jQuery

GET IN TOUCH

We will be glad to help you with any general or technical questions.