Form Validation

Form validation is a crucial part of ensuring that user input meets specified requirements before submitting a form. In this guide, we explain how form validation works in our components, including how to set up validation rules, validation triggers, and validation states.

Props Overview

There are three key props used to configure form validation: rules, state, and validateOn.

1. rules Prop

The rules prop is an array where you can specify the validation functions for the form field. These functions are built-in rules, such as requiredValidator, emailValidator, and others.

TIP

You can find all of our validation rules in the src/@core/utils/Validators.js file.

<template>
  <EInput
      :rules="[requiredValidator, emailValidator]"
      label="Email"
      name="email"
      v-model="email"
  />
</template>
<script setup>
  import {emailValidator, requiredValidator} from "@validators"

  const email = ref("")
  const password = ref("")
</script>

2. validateOn Prop

The validateOn prop defines when the validation should be triggered. It can be set to one of the following values:

• input: Validation occurs every time the user types in the field.
• blur: Validation occurs when the input field loses focus.
• submit: Validation occurs when the form is submitted. (Using EForm component)

Different components may have different default behaviors:

• For input-like components (EInput, EFileInput, ETextarea, ESelect, EOtpInput), you can use input, blur, or submit for validateOn.
• For components like ECheckbox, ESwitch, ERadio, and custom inputs, the common options are submit and input. However, submit generally offers a better user experience.

Example:

<template>
  <div>
    <EInput
        :rules="[requiredValidator, passwordValidator]"
        label="Password"
        v-model="password"
    />
    <EInput
        :rules="[
        requiredValidator,
        confirmValidator(confirmPassword, password)
      ]"
        label="Confirm Password"
        v-model="confirmPassword"
    />
  </div>
</template>
<script setup>
  import {requiredValidator, passwordValidator, confirmValidator,} from "@validators";

  const password = ref("")
  const confirmPassword = ref("")
</script>

3. state Prop

The state prop allows you to manually control the validation state of an input. If you need to programmatically indicate whether the input is valid or has an error, you can set this prop to success or error to adjust the UI accordingly.

<EInput
    :state="'error'"
    label="Email"
    v-model="email"
/>

Validation with EForm Component

To validate the entire form on submit, the EForm component is used. The EForm component listens to the name prop of the input elements and tracks their validation status.

• Ensure every form field (e.g., EInput, ESelect) has a name prop for the EForm component to work properly.
• When the form is submitted, the EForm component checks if all fields pass their validation rules.

Example:

<template>
    <EForm
        ref="formRef"
        validate-on="submit"
    @submit.prevent="submit"
    >
    <EInput
    :rules="[requiredValidator, emailValidator]"
    label="Email"
    name="email"
    v-model="email"
    />
    <Btn type="submit">Submit</Btn>
</EForm>
</template>

<script setup>
import {emailValidator, requiredValidator} from "@validators"

const email = ref("")
const password = ref("")
const formRef = ref("")

const submit = () => {
  if (formRef.value.isFormValid) {
    // Proceed with form submission
  } else {
    // Handle validation failure
  }
}
</script>

In the example above, the formRef is used to reference the EForm component. The isFormValid property of the form provides the overall validation status of the entire form. You can check this status in your submit method to determine whether the form can be submitted.

Related Pages

• EForm