Field Validation

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.

Note

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.

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

Will automatically generate: “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">

---

General Rules

required

Check if the field has a value.

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

email

Check if the field is a valid email address.

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

url

Check if the field is a valid URL.

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

active_url

Check if the field is a valid URL with a valid A or AAAA record.

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

boolean

Verify that the value can be cast as a boolean. Valid values: true, false, 1, 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

Value must be “yes”, “on”, 1, or true. Often used for terms acceptance.

<input type="checkbox" name="accept_terms" value="yes"
        sf-validate:accepted="Please accept to continue">

---

Number Rules

numeric

Check if the field is a valid number. Valid: 1, 1.5, 0.5, 0

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

integer

Check if the field is a valid integer. Valid: 1, 0, -1, 100

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

max[value]

Check if the field is less than or equal to the given value.

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

min[value]

Check if the field is greater than or equal to the given value.

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

---

Equivalence Rules

max_length[value]

Check if the field is at most the given length.

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

min_length[value]

Check if the field is at least the given length.

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

in[foo,bar,…]

Check if the field is contained in the given list.

<input type="text" name="color"
        sf-validate:in[pink,rose]="Wrong color, please try again">

not_in[foo,bar,…]

Check if the field is not contained in the given list.

<input type="text" name="namespace"
        sf-validate:not_in[www,api]="Sorry, that's a reserved namespace">

starts_with[foo,bar,…]

Check if the field starts with one of the given values.

<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,…]

Check if the field does not start with any of the given values.

<input type="text" name="username"
        sf-validate:doesnt_start_with[admin]="Your username cannot start with admin">

doesnt_end_with[foo,bar,…]

Check if the field does not end with any of the given values.

<input type="email" name="email"
        sf-validate:doesnt_end_with[.con,.info,.net]="Invalid email domain">

---

Date Rules

date

Check if the field is a valid date. Valid: 2020-01-01, 2020-01-01 12:00:00

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

after[date]

Check if the field is after the given date.

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

before[date]

Check if the field is before the given date.

<input type="date" name="end_date"
        sf-validate:before[yesterday]="You can only end before yesterday">

date_equals[date]

Check if the field equals the given date.

<input type="date" name="independence_day"
        sf-validate:date_equals[1776-07-04]="No, please try again">

---

Field Comparison Rules

same[field]

Check if the field is the same as another field.

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

gt[field]

Check if the field is greater than another field.

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

gte[field]

Check if the field is greater than or equal to another field.

<input type="number" name="run"
        sf-validate:gte[walk]="Can't run before you walk!">

lt[field]

Check if the field is less than another field.

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

lte[field]

Check if the field is less than or equal to another field.

<input type="number" name="give_away"
        sf-validate:lte[apples]="You can't give away more than you have">

Caution

If the field is a text field, gt, gte, lt and lte will compare character length. Combine with numeric or integer rules if needed.

---

Value Type Rules

alpha

Check if the field only contains letters.

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

alpha_dash

Check if the field only contains letters, numbers, dashes and underscores.

<input type="text" name="username"
        sf-validate:alpha_dash="Only letters, numbers, dashes and underscores allowed">

alpha_num

Check if the field only contains letters and numbers.

<input type="text" name="username"
        sf-validate:alpha_num="Only letters and numbers allowed">

ip

Check if the field is a valid IP address.

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

ipv4

Check if the field is a valid IPv4 address.

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

ipv6

Check if the field is a valid IPv6 address.

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

uuid

Check if the field is a valid UUID.

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