Form Validation - Schema

The validation schema defines the form input fields, groups and how they work together.

From the Overview page we’ve learned:

  • The schema object provides form validation status fields such as valid, invalid, touched, untouched, dirty, pristine and errors
  • The form component handles field value changes using the v-model directive
  • Each field name inside the defined schema connects to an input using the name property in your template
  • Using the validators field, you can specify an array of validators to be used on the field input

Default Field Value

Providing a default value for a validation schema field can be done using the value field:

<i-form v-model="schema">
    <i-form-group>
        <i-form-label for="input-with-default-value">Input with default value</i-form-label>
        <i-input id="input-with-default-value" name="input" placeholder="Type something.." />
    </i-form-group>
</i-form>

Validation Message

Each validator accepts a custom error message using the message field. This allows you to easily use i18n to display custom error messages.

<i-form v-model="schema">
    <i-form-group>
        <i-form-label for="input-with-custom-error-message">Input with custom error message</i-form-label>
        <i-input id="input-with-custom-error-message" name="input" placeholder="Type something.." />
        <i-form-error for="input" />
    </i-form-group>
</i-form>

Error Visibility

The <i-form-error> component has a visible property that can be either an array of string values (multiple conditions), or a simple string (single condition).

The string values refer to the schema fields that have to be true before displaying the error (i.e. setting a value of invalid will show the error message when the field becomes invalid). By default, it is set to ['touched', 'dirty', 'invalid'].

<i-form v-model="schema">
    <i-form-group>
        <i-form-label for="input-with-custom-error-visibility">Input validated on input</i-form-label>
        <i-input id="input-with-custom-error-visibility" name="input" placeholder="Type something.." :error="['invalid']" />
        <i-form-error for="input" :visible="['invalid']" />
    </i-form-group>
</i-form>

The default field validation events can be configured globally when initializing Inkline or by updating the value of this.$inkline.options.validateOn.

Validation Event

By using the validateOn field you can specify the event that triggers the validation. By default, fields get validated on both input and blur.

<i-form v-model="schema">
    <i-form-group>
        <i-form-label for="input-with-custom-validation-event">Input validated on input</i-form-label>
        <i-input id="input-with-custom-validation-event" name="input" placeholder="Type something.." />
        <i-form-error for="input" :visible="['invalid']" />
    </i-form-group>
</i-form>

The default field validation events can be configured globally when initializing Inkline or by updating the value of this.$inkline.options.validateOn.

Schema Groups

You can define schema groups to access the validation result of a group of inputs.

Object Schema Groups

Objects that aren’t empty and don’t have a value or validators field are treated as schema groups. Schema groups can be used to see the validation status of multiple related fields. You can also assign the schema group to an <i-form-group> component to simulate form nesting.

Group validation status: Pending

<i-form v-model="schema">
    <i-form-group name="group">
        <i-form-group>
            <i-form-label>Input 1</i-form-label>
            <i-input name="input1" placeholder="Type something.." />
            <i-form-error for="input1" />
        </i-form-group>
        <i-form-group>
            <i-form-label>Input 2</i-form-label>
            <i-input name="input2" placeholder="Type something.." />
            <i-form-error for="input2" />
        </i-form-group>
    </i-form-group>
    <p>
        Group validation status: <strong>{{ groupValidationStatus }}</strong>
    </p>
</i-form>

Array Schema Groups

Form groups can also be an Array of fields, allowing you to loop over them usingv-for.

Group validation status: Pending

<i-form v-model="schema">
    <i-form-group name="group">
        <i-form-group v-for="(field, index) in schema.group">
            <i-form-label>Input {{index}}</i-form-label>
            <i-input :name="`${index}`" placeholder="Type something.." />
            <i-form-error :for="`${index}`" />
        </i-form-group>
    </i-form-group>
    <p>
        Group validation status: <strong>{{ groupValidationStatus }}</strong>
    </p>
</i-form>