#Form Validation

Web applications are often fundamentally a means to consume or present information. When designing forms, aside from having well-designed controls and sensible layouts, forms should always be clear about their validation. Feather DS controls are designed to work well with common validation paradigms, but we typically like to use;

• Vee-Validate
• Yup

# Examples

# Patterns

We encourage you to use best practices for validation like in the example above;

• Use inline validation
• Validate on blur
• Communicate your errors clearly
• Indicate which fields are required
• Summarise errors and link to the field

# Elements

Feather DS elements that you can use in valdiation contexts include;

• Autocomplete
• Checkbox
• DateInput
• Input
• ProtectedInput
• Radio
• Select
• Textarea

# Setup

See the Validation Setup example above for a working implementation of the below.

# Components

Simply add schema props to any inputs you need to validate and configure the rules in your code. We provide a basic ValidationHeader component from the Input package for convenience, should you require it. If a parent component is using the useForm composable detailed below, then the ValidationHeader component will automatically receive the errors, no props are required.

Alternatively, you can pass the error messages directly to the ValidationHeader using the errorList prop should your use-case require it.

<ValidationHeader :errorList="errorMessages" />
<FeatherInput label="Email *" :modelValue="email" :schema="emailV" required />

# useForm

The crux of the validation is the useForm composable. This uses the Vue Provide/Inject pattern to enable validation in any form controls. As long as you instance the useForm in your parent component setup method where your form is declared, all components will automatically register if they have a schema supplied to them.

That means all you have to do is simply call the validate function when appropriate to validate the entire form. You can pass the output of the function to the ValidationHeader component and it will display the errors in a list for extra usability.

import { useForm } from "@featherds/input-helper";

export default {
  setup() {
    const form = useForm();
    //...
    const onSubmit = (e) => {
      e.preventDefault();
      //run validation
      form.validate();
      //...
    };
  },
};

If you need to clear the error messages displayed via useForm it also provides a clear function. It removes all error messages and returns an empty array.

import { useForm } from "@featherds/input-helper";

export default {
  setup() {
    const form = useForm();
    //...
    const onClear = (e) => {
      //clear errors
      form.clear();
    };
  },
};