Today I worked on some form validations to let my users knew if their input was valid or not— and then provided them with some guidance if there were errors and the input didn’t save. Rails and ActiveRecord offer plenty of built-in support for this and DataMapper even has some options too, but they don’t quite work they way I need them to.

I figured that HTML5 offered some nice options and a quick Google search led me to this page, which offered many of the little shortcuts you could add to an input tag for validation.

For example, you could do something as simple as:

<input type="text" name="email" required>

Now if your user pushed the “submit” button without filling in the email field then a little popover would let them know that it’s required.

Additionally, HTML5 also offers specific type attributes that can check formatting (with rules that vary by browser). An example of this with the type “email” would be:

<input type="email" name="email" required>

Now the user not only has to definitely put some text in the field but they also need to have a properly formatted email address. The rules of a properly formatted email address vary from browser to browser, but typically it at least requires an “@” symbol.

And for the cherry on top there is the pattern attribute that you can add to the input tag, and it accepts JavaScript regular expressions. The example that the aforementioned site uses is an input tag that requires a url in the proper format:

<input type="url" name="website" required pattern="https?://.+">

This insures that not only does a user have to enter something and that it’s a url, but that it is specifically a url preceded by “http://”.

There is only one huge problem with all of this: it doesn’t work on all browsers, and especially not older ones. I actually can’t even get it to work in Safari 6 locally, although Apple’s advertises the new Safari as offering HTML5 forms validation.

As nice as HTML5 form validation is … it looks like I’ll have to find another solution.