Custom HTML5 Validation Error Messages with Civem.js

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 had to use custom error messages and show them in both English and Arabic. I achieved error message customization with Civem.js, which lets you easily change the message to whatever you wish.

Steps to add custom error messages:

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 customize a required field error message, use the data-errormessage-value-missing attribute:

<input type="text" required data-errormessage-value-missing="Something's missing" />

5. To customize a field type mismatch error message, use the data-errormessage-type-mismatch attribute:

<input
  type="email"
  id="one"
  required
  data-errormessage-value-missing="Something's missing"
  data-errormessage-type-mismatch="Invalid!"
/>

6. For showing pattern mismatch, set custom error message on data-errormessage-pattern-mismatch.

Other available attributes:

• data-errormessage-too-long
• data-errormessage-range-underflow
• data-errormessage-range-overflow
• data-errormessage-step-mismatch
• data-errormessage-custom-error