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.