Form Validation

A CodePen Project

I went so far as to build a custom element for a reusable AJAX form, so I thought, why stop there? Inspired by the Angular terms, "untouched," "touched," "pristine," and "dirty," I've created a custom element that will automatically add each of these as classes (prefixed by an underscore to avoid conflicts.) Not only that, but I've also enabled custom validation by defining a method on the DOM reference, much like an onclick  handler. In the same way, I exposed the "invalid" message so it can be customized also.

Tools Used:

  • JavaScript (ES6+)
  • Custom Elements