brucewu16899 / civem.js

Custom HTML5 validation error messages

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!