Form Validation - Validators

Validators are configurable functions used to check whether an input value matches a specific criteria.

There are several validation options that can be used in the validators field:

Alpha Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field should contain only letters" />
        <i-form-error for="input" />
    </i-form-group>
    <i-form-group>
        <i-input name="inputSpaces" placeholder="This field should contain only letters and spaces" />
        <i-form-error for="inputSpaces" />
    </i-form-group>
    <i-form-group>
        <i-input name="inputDashes" placeholder="This field should contain only letters and dashes" />
        <i-form-error for="inputDashes" />
    </i-form-group>
</i-form>

Alphanumeric Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field should contain only letters and numbers" />
        <i-form-error for="input" />
    </i-form-group>
    <i-form-group>
        <i-input name="inputSpaces" placeholder="This field should contain only letters, numbers and spaces" />
        <i-form-error for="inputSpaces" />
    </i-form-group>
    <i-form-group>
        <i-input name="inputDashes" placeholder="This field should contain only letters, numbers and dashes" />
        <i-form-error for="inputDashes" />
    </i-form-group>
</i-form>

Email Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field should contain an email" />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Min Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field accepts a minimum value of 10." />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Max Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field accepts a maximum value of 100." />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Min Length Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field requires at least 6 characters." />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Max Length Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field accepts up to 12 characters." />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Number Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field should contain only numbers" />
        <i-form-error for="input" />
    </i-form-group>
    <i-form-group>
        <i-input name="inputNegative" placeholder="This field should contain positive or negative numbers" />
        <i-form-error for="inputNegative" />
    </i-form-group>
    <i-form-group>
        <i-input name="inputNegativeDecimal" placeholder="This field should contain positive or negative decimal numbers" />
        <i-form-error for="inputNegativeDecimal" />
    </i-form-group>
</i-form>

Required Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field is required" />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Same As Validator

<i-form v-model="form">
    <i-form-group>
        <i-input type="password" name="password" placeholder="Enter your password" />
        <i-form-error for="password" />
    </i-form-group>
    <i-form-group>
        <i-input type="password" name="passwordConfirmation" placeholder="Confirm your password" />
        <i-form-error for="passwordConfirmation" />
    </i-form-group>
</i-form>

Custom Validator

<i-form v-model="form">
    <i-form-group>
        <i-input name="input" placeholder="This field is custom validated. It needs to contain &quot;inkline&quot;" />
        <i-form-error for="input" />
    </i-form-group>
</i-form>