Improved Form Validation via Foundation Abide

[gedtn]

A while back (task 880) we improved form validation by utilising the HTML Required attribute, but it was noted that it was not universally supported. At the time it was proposed that we utilise the Foundation Abide validation (http://foundation.zurb.com/sites/docs/v/5.5.3/components/abide.html) with Adam noting ...the demo of Abide in Safari seemed OK (I'm also using an older Safari 8).

I have explored Abide further and found out why it did not work in earlier testing. I have been able to get a prototype working (mods to html::multiColFormand form-default error messages) and see many benefits in utilising its rich feature set. It would be important to make sure it was an opt in solution.

In a nutshell, abide needs a validation message attached to each field to be tested. Example:

<div class="input-wrapper">
  <label>Email Address <small>required</small>
    <input type="email" required>
  </label>
  <small class="error">A valid email address is required.</small>
</div>

Aside from validating the standard input types, it also offers custom patterns (the default patterns are listed below). You use the patterns via

<input type="text" pattern="integer">

Name	Valid Example or Format
alpha	Foundation
alpha_numeric	A1Sauce
integer	-1
number	2937
card	visa, amex, mastercard
cvv	384 or 3284
email	[email protected]
url	http://zurb.com
domain	zurb.com
datetime	YYYY-MM-DDThh:mm:ssTZD
date	YYYY-MM-DD
time	HH:MM:SS
month_day_year	MM/DD/YYYY
color	#FFF or #FFFFFF

The link above goes into a lot more detail about the features and customisation.