Skip to content

Custom HTML5 validation error messages

Notifications You must be signed in to change notification settings

XmlmXmlmX/civem.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Custom Input Validation Error Messages

HTML5 form validation error messages are hard-coded to the browser. Civem.js lets you easily change them to whatever you wish. For translation or consistency with your server-side error messages. Civem.js does not depend on any library or framework, so you can use it without a doubt.

Quick Start

  1. Grab the latest download
  2. Add the civem.js script to your page
  3. Start using the custom error message attributes on your input, textarea and select elements

API

Any input, textarea or select element may contain:

  • data-errormessage a generic error message

Validity state specific error messages:

  • data-errormessage-value-missing
  • data-errormessage-type-mismatch
  • data-errormessage-pattern-mismatch
  • data-errormessage-too-long
  • data-errormessage-range-underflow
  • data-errormessage-range-overflow
  • data-errormessage-step-mismatch
  • data-errormessage-custom-error

Demo

At jsFiddle.

Tested on

  • Firefox 17.0.1
  • Chrome 23.0.1271.97

Developing

  1. Fork
  2. Make your modifications
  3. Commit
  4. Make sure you have node and npm installed
  5. Install the required dependencies: npm install node-fs dot uglify-js gits read needle
  6. Install jake: npm install jake -g
  7. Compile and minify: jake
  8. Test
  9. Create a pull request
  10. ???
  11. Profit!

About

Custom HTML5 validation error messages

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%