The Search for an Efficient Form Validator

I’ve been working on a contact form for A6X. My plan was to do inline validation as well as serverside validation. Ideally, everything gets validated on the client end and the server just does a double check, instead of having to output an error message.

My conditions were:

• the javascript validator needed to be HTML5-compatible
  • recognize html5 form elements, with graceful fallbacks
  • replaces built in html5 validation tooltips (i’m actually surprised at how bad these look in chrome…)
• validate only after text is written, NOT specifically on blur/focus/click/mouseover(i’ve seen this before. why?!)/whatever
  • smart enough to not validate placeholder text
• allows the option to either validate on submit or onblur (see above point)
• ideally uses html5 validation methods whenever possible, with a fallback to inline js regex
• submit button is disabled with javascript and enabled only when everything validates

Of course, I haven’t been able to find a single plugin which meets all of these conditions. Only one even comes close and I still have a lot of issues with it. For instance, I had to rewrite the phone regex because it was not flexible. The e-mail regex doesn’t even allow uppercase letters. Um, HELLO?!?! Lots of people add uppercase letters to their e-mail addresses to help distinguish specific words.

• thisisanemail@example.com
• thisIsAnEmail@example.com

Tell me, which is easier to read? Exactly.

And I really don’t understand why most validation scripts validate directly on blur. Or on focus. Validation needs to work like this:

1. Disable the form submit button on page load
2. On input blur (input loses focus), check whether the input is a) blank or b) the placeholder text.
   1. If it’s the default text, do nothing.
   2. If it’s not the default text, validate it.
3. If an input is determined to be invalid, it gets an invalid CSS class.
   1. You should be able to define how far up the DOM the class is added. I.e. parent or up the DOM until it finds a specific class/element/etc
   2. Any error message is enabled with this class as well.
      1. for example: .invalid .error-message {display: block;}
4. If an input is determined to be valid, it either receives a valid class or does nothing
5. Upon determining that everything is valid, the submit button is re-enabled.

No javascript? No problem. Since the submit button is disabled with javascript, any no-js browser will still be able to submit the form. And that’s where the serverside validation comes in.

Check out how the serverside validation would occur:

1. With JS, you would either add/remove a hidden form element. In this case, we’ll add a hidden element called “uses-js”.
2. When the form is submitted, serverside detection is used to see if a hidden element called “uses-js” is posted.
3. If it is, the server assumes that the form is valid.
4. If it isn’t, the server will validate.
5. Once validated, the form gets its further processing (stored in database, e-mailed, whatever)

Obviously, this isn’t perfect. Any bot targeting the system directly could inject that input. And the form could be submitted using javascript from the console.

However, as long as you have some sort of anti-bot code and sanitize your data, you can just relax and move on. Note that I’m also a huge advocate for using alternative methods to CAPTCHA, but that’s for a different post.

I did just come across html5ifv which seems to be pretty extendable, but it still requires too much on my part to make it function the way I want.

It’s possible that what I’m asking for is very specific. But regardless, I think that’s essentially how form validation should be designed. I don’t think it’s difficult to achieve. I’ll probably end up creating something and posting it on github.