Blog

Customizing HTML5 Form Validation Error Messages

  • HTML5
  • form
  • validation
  • error
  • message
  • JavaScript
  • JS
  • translate
  • popup
  • civem.js

Ever tried out HTML5 form validation? If not, you should! It'll save server-side resources and improve the usability. Also all the good browsers support it. For the not-so-nice browsers, there are polyfills for example H5F.

Done with the testing? If so, you might've noticed some issues with the popping up error messages. They may seem ugly (fixing that is not in the scope of this article) and the text of the error message comes out-of-nowhere. It might be even in incorrect language, depending on the one the browser's in. So, whether you want to unify the messages with their server-side equivalents or just force them to match the language of your site, you're in trouble.

Well, there's an API for setting the error messages.

element.oninvalid = function(e) {
  if (!e.target.validity.valid) {
    e.target.setCustomValidity("This field contains errors");
  }
};
element.oninput = function(e) {
  e.target.setCustomValidity("");
};

But, as you see, you'll end up messing the content with the logic and writing loads of unnecessary JavaScript. The example above doesn't even contain the logic for switching between the various error states. You see where this is going, right?

So, I wrote civem.js, it stands for Custom Input Validation Error Messages. And how do you use it? Simply, download the latest version, include it on your page and begin using data-errormessage and data-errormessage-* attributes on your form elements to validate. You can go check out the demo on jsFiddle or read the documentation.

<script src="civem-x.x.x.min.js" type="text/javascript"></script>
<input type="email" data-errormessage-value-missing="It says &quot;required&quot; in the HTML!" data-errormessage-type-mismatch="Let me give you a hint: type=&quot;email&quot;." data-errormessage="This is the fallback error message." required>

Easy, huh!

Now, when most of you readers are busy fiddling with it, is time for some warnings. It hasn't been tested awfully lot by me, so make sure it works for your case, if it doesn't, file an issue on GitHub, I'll fix them ASAP. Also, I'm not (yet) a true JavaScript wizard, so the implementation might just suck. Anyhow, feedback is warmly welcome, so please use the comment facility below and the fork button on GitHub!