Rails Kitchen

It's a place to write on stuff I learned recently.

Custom HTML5 Validation Error Messages With Civem.js

| Comments

HTML5 allows us to implement client-side form validation without any JavaScript coding. However, error messages are hard-coded to the browser. In my recent project I faced situation, I have to use custome error message and show error message in both english and arabic. I achived error message customisation with Civem.js which let you easily change the message to whatever you wish.

Following are steps to add custom error messages to our project.
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
4 - To customise required field error message use data-errormessage-value-missing attribute
1
<input type="text" required data-errormessage-value-missing="Something's missing" >
5 - To customise filed type mismatch error message, use data-errormessage-type-mismatch attribute
1
<input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
6 - For showing pattern missmatch, set custome error message on attribute data-errormessage-pattern-mismatch
there are some other attributes also, that we can use to set specific error messages
1
2
3
4
5
data-errormessage-too-long
data-errormessage-range-underflow
data-errormessage-range-overflow
data-errormessage-step-mismatch
data-errormessage-custom-error

Comments