Learn how to validate your form fields and display error messages.

Basic usage

Directive syntax

Form fields are validated using the sf-validate:{rule}="My error message" directive. This directive accepts a value for what the error message should be if the field fails validation.

<input type="email" name="email" 
        sf-validate:email="Hmm, that doesn't look like an email">

Displaying the return error message is covered in the Error states section.

You can omit your own error message

If you assign a field with a validation rule but don't provide an error message, SnipForm will generate an appropriate error message for you. Example:

<input type="text" name="first_name" sf-validate:required>

Will automatically generate the error message "The first name field is required.".

Multiple rules

You can add multiple rules to a single field. They will be parsed in the order they are added.

<input type="email" name="email"
        sf-validate:required="This field is required"
        sf-validate:email="Hmm, that doesn't look like an email">

In the above example, the field will first be checked to see if it is empty. If it is, the required error message will be displayed. If it is not empty, the email rule will be checked. If it fails, the email error message will be displayed.

Available rules

General

required

The required rule will check if the field has a value. If the field is empty, the error message will be displayed.

<input type="text" name="name" 
        sf-validate:required="The name field is required">

email

The email rule will check if the field is a valid email address. If the field is not a valid email address, the error message will be displayed.

<input type="email" name="email" 
        sf-validate:email="Please enter a valid email">

url

The url rule will check if the field is a valid URL. If the field is not a valid URL, the error message will be displayed.

<input type="text" name="homepage" 
        sf-validate:url="Please enter a valid url, starting with http">

active_url

The active_url rule will check if the field is a valid URL that has a valid A or AAAA record. If the field is not a valid URL or the URL is not active, the error message will be displayed.

<input type="text" name="homepage" 
        sf-validate:active_url="Please enter a valid and active url">

boolean

The boolean rule is used to verify that the value of a field can be cast as a boolean. If the field does not contain a valid boolean value, an error message will be displayed.

Valid boolean values include true, false, 1, and 0.

<select name="deal" sf-validate:boolean="Please select yes or no">
    <option value="">Please select</option>
    <option value="true">Yes</option>
    <option value="false">No</option>
</select>

accepted

The value of the field being validated must be either "yes", "on", 1, or true. This type of validation is often used to ensure that a user has accepted the terms of service or a similar agreement.

<label for="accept_terms">Accept Terms of Service:</label>
<input type="checkbox" name="accept_terms" value="yes" 
        sf-validate:accepted="Please accept to continue">

Numbers

numeric

The numeric rule will check if the field is a valid number. If the field is not a valid number, the error message will be displayed.

Valid examples: 1, 1.5, 0.5, 0

<input type="number" name="weight"
        sf-validate:numeric="Please enter a valid number">

integer

The integer rule will check if the field is a valid integer (whole numbers). If the field is not a valid integer, the error message will be displayed.

Valid examples: 1, 0, -1, 100

<input type="number" name="age" 
        sf-validate:integer="Please enter a valid integer">

max[value]

The max rule will check if the field is less than or equal to the given value. If the field is greater than the given value, the error message will be displayed.

<input type="number" name="age" 
        sf-validate:max[100]="Sorry, you're too old">

min[value]

The min rule will check if the field is greater than or equal to the given value. If the field is less than the given value, the error message will be displayed.

<input type="number" name="age" 
        sf-validate:min[18]="You need to be 18 or older to continue">

Equivalence

max_length[value]

The max_length rule will check if the field is at most the given length. If the field is longer than the given length, the error message will be displayed.

<label for="comment">Your message</label>
<textarea type="text" name="comment" 
        sf-validate:max_length[255]="Your message is too long">
</textarea>

min_length[value]

The min_length rule will check if the field is at least the given length. If the field is shorter than the given length, the error message will be displayed.

<label for="comment">Your message</label>
<textarea type="text" name="comment" 
        sf-validate:min_length[5]="Your message is too short">
</textarea>

in[foo,bar,...]

The in rule will check if the field is contained in the given list of values. If the field is not contained in the list, the error message will be displayed.

<label for="color">What color do you get if you mix red and white?</label>
<input type="text" name="color" 
        sf-validate:in[pink,rose]="Wrong color, please try again">

not_in[foo,bar,...]

The not_in rule will check if the field is not contained in the given list of values. If the field is contained in the list, the error message will be displayed.

<label for="namespace">Please enter your subdomain</label>
<input type="text" name="namespace" 
        sf-validate:not_in[www,api]="Sorry, that's a reserved namespace">

starts_with[foo,bar,...]

The starts_with rule will check if the field starts with one of the given values. If the field does not start with one of the given values, the error message will be displayed.

<label for="title_name">What is your title and name</label>
<input type="text" name="title_name" 
        sf-validate:starts_with[Mr,Mrs,Ms,Dr,Lord]="Please start with your title">

doesnt_start_with[foo,bar,...]

The doesnt_start_with rule will check if the field does not start with any of the given values. If the field starts with any of the given values, the error message will be displayed.

<label for="username">Please enter your username</label>
<input type="text" name="username" 
        sf-validate:doesnt_start_with[admin]="Your username cannot start with admin">

doesnt_end_with[foo,bar,...]

The doesnt_end_with rule will check if the field does not end with any of the given values. If the field ends with any of the given values, the error message will be displayed.

 <input type="email" name="email"
        sf-validate:doesnt_end_with[.con,.info,.net]="Your email cannot end with .con, .info or .net">

Dates

date

The date rule will check if the field is a valid date. If the field is not a valid date, the error message will be displayed.

Valid examples: 2020-01-01, 2020-01-01 12:00:00

<input type="date" name="birthday" 
        sf-validate:date="Please enter a valid date">

after[date]

The after rule will check if the field is a valid date and is after the given date. If the field is not a valid date or is not after the given date, the error message will be displayed.

<input type="date" name="birthday" 
        sf-validate:after[1950-01-01]="Please enter a date after 1950-01-01">

<input type="date" name="start_date"
        sf-validate:after[tomorrow]="You can only start after tomorrow">

before[date]

The before rule will check if the field is a valid date and is before the given date. If the field is not a valid date or is not before the given date, the error message will be displayed.

<input type="date" name="birthday" 
        sf-validate:before[2020-01-01]="Please enter a date before 2020-01-01">
        
<input type="date" name="end_date"
        sf-validate:before[yesterday]="You can only end before yesterday">

date_equals[date]

The date_equals rule will check if the field is a valid date and is equal to the given date. If the field is not a valid date or is not equal to the given date, the error message will be displayed.

<label for="independence_day">When did America gain independence from Britain?</label>
<input type="date" name="independence_day" 
        sf-validate:date_equals[1776-07-04]="No, please try again">

Based on other fields

same[field]

The same rule will check if the field is the same as the given field. If the field is not the same as the given field, the error message will be displayed.

<label for="recovery_word">Recovery word</label>
<input type="text" name="recovery_word" 
        sf-validate:same[recovery_word_confirmation]="Recovery words do not match">
        
<label for="recovery_word_confirmation">Confirm Recovery word</label>
<input type="text" name="recovery_word_confirmation">

gt[field]

The gt rule will check if the field is greater than the given field. If the field is not greater than the given field, the error message will be displayed.

<label for="age">Cost</label>
<input type="number" name="cost">

<label for="price">Selling Price</label>
<input type="number" name="price"
        sf-validate:gt[cost]="Please make a profit">

gte[field]

The gte rule will check if the field is greater than or equal to the given field. If the field is not greater than or equal to the given field, the error message will be displayed.

<label for="walk">In which year did you start to walk?</label>
<input type="number" name="walk">

<label for="run">In which year did you start to run?</label>
<input type="number" name="run"
        sf-validate:gte[walk]="Can't run before you walk!">

lt[field]

The lt rule will check if the field is less than the given field. If the field is not less than the given field, the error message will be displayed.

<label for="cost">Cost</label>
<input type="number" name="cost">

<label for="price">Selling Price</label>
<input type="number" name="price"
        sf-validate:lt[cost]="Making a profit in tech is not allowed">

lte[field]

The lte rule will check if the field is less than or equal to the given field. If the field is not less than or equal to the given field, the error message will be displayed.

<label for="apples">How many apples do you have?</label>
<input type="number" name="apples">

<label for="give_away">How many apples do you want to give away?</label>
<input type="number" name="give_away"
        sf-validate:lte[apples]="You can't give away more than you have">

Equivalence comparisons can be used on text fields

If the field is a text field, the gt, gte, lt and lte rules will perform an equivalence comparison based on the character length of the value in the compared field. If you need to ensure that the value is a number, combine the validation with the numeric or integer rules.

Regex

regex[pattern]

Coming soon

not_regex[pattern]

Coming soon

Value types

alpha

The alpha rule will check if the field only contains letters. If the field contains anything other than letters, the error message will be displayed.

<label for="name">Name</label>
<input type="text" name="name" 
        sf-validate:alpha="Name must only contain letters">

alpha_dash

The alpha_dash rule will check if the field only contains letters, numbers, dashes and underscores. If the field contains anything other than letters, numbers, dashes and underscores, the error message will be displayed.

<label for="username">Username</label>
<input type="text" name="username" 
        sf-validate:alpha_dash="Username must only contain letters, numbers, dashes and underscores">

alpha_num

The alpha_num rule will check if the field only contains letters and numbers. If the field contains anything other than letters and numbers, the error message will be displayed.

<label for="username">Username</label>
<input type="text" name="username" 
        sf-validate:alpha_num="Username must only contain letters and numbers">

ip

The ip rule will check if the field is a valid IP address. If the field is not a valid IP address, the error message will be displayed.

<label for="ip">IP Address</label>
<input type="text" name="ip" 
        sf-validate:ip="Please enter a valid IP address">

ipv4

The ipv4 rule will check if the field is a valid IPv4 address. If the field is not a valid IPv4 address, the error message will be displayed.

<label for="ip">IP Address</label>
<input type="text" name="ip" 
        sf-validate:ipv4="Please enter a valid IPv4 address">

ipv6

The ipv6 rule will check if the field is a valid IPv6 address. If the field is not a valid IPv6 address, the error message will be displayed.

<label for="ip">IP Address</label>
<input type="text" name="ip" 
        sf-validate:ipv6="Please enter a valid IPv6 address">

uuid

The uuid rule will check if the field is a valid UUID. If the field is not a valid UUID, the error message will be displayed.

<label for="uuid">UUID</label>
<input type="text" name="uuid" 
        sf-validate:uuid="Please enter a valid UUID">