Data Validation for HTML


If you’d like to limit the values that can be submitted or make certain fields required, you can add an attribute called data-validation to the input tag:

<input type="text" name="vars[zip_code]" data-validation="required postalcode"/>
Parameter Description Example Value
phone Phone number 877 812 8689
postalcode Postal code such as zip code 10010
required Choose this if you want to require this field
match-[field name] Forces the field to match another field
url URL validation
email Email address (turned on by defualt if the field is named ’email’)
number Any number 42

Error Messages

If you’d like to show an error message when the user enters an invalid value or fails to enter a required field, you can put the error message inside of an html element and give that element an attribute called data-errormsg with the name of the invalid input as a value, like this:

<input type="text" name="vars[first_name]" data-validation="required"/> 
<span data-errormsg="vars[first_name]">Tell us your first name</span>

The error message element will only be visible if the the user fails to enter a valid value for the field in question.