Data Validation for HTML

Validation

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 https://www.sailthru.com
email Email address (turned on by defualt if the field is named ’email’) support@sailthru.com
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.

Top