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.

import {useState} from "react";
import {emailValidator, requiredValidator} from "@validators";
import EInput from "@components/Form/EInput";

const Example = () => {
    const [email, setEmail] = useState("");

    const handleChange = (event) => {
        setEmail(event.target.value);
    };

    return (
        <EInput
            label="Email"
            onChange={handleChange}
            value={email}
            rules={[requiredValidator, emailValidator]}
        />
    );
};

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:

import {useState} from "react";
import {
    requiredValidator,
    confirmValidator,
    passwordValidator
} from "@validators";
import EInput from "@components/Form/EInput";

const Example = () => {
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");

    const handlePSChange = (event) => {
        setPassword(event.target.value);
    };

    const handleCPSChange = (event) => {
        setConfirmPassword(event.target.value);
    };

    return (
        <>
            <EInput
                label="Password"
                onChange={handlePSChange}
                value={password}
                rules={[requiredValidator]}
                validateOn="blur"
            />
            <EInput
                label="Confirm Password"
                onChange={handleCPSChange}
                value={confirmPassword}
                rules={[passwordValidator, confirmValidator(confirmPassword, password)]}
                validateOn="input"
            />
        </>
    );
};

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.

import {useState} from "react";
import EInput from "@components/Form/EInput";

const Example = () => {
    const [email, setEmail] = useState("");

    const handleChange = (event) => {
        setEmail(event.target.value);
    };

    return (
        <EInput
            label="Email"
            onChange={handleChange}
            value={email}
            state="error"
        />
    );
};

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:

<EForm
    onSubmit={submitHandler}
    preventDefault
>
    <EInput
        name="email"
        label="Email"
        value={email}
        rules={[requiredValidator]}
        onChange={(event) => setEmail(event.target.value)}
    />
    <EBtn type="submit">
        Submit
    </EBtn>
</EForm>

In this example, the submitHandler function will receive the validation status (isFormValid) to inform you whether the entire form is valid.

Example of submitHandler:

const submitHandler = (event, isFormValid) => {
    if (isFormValid) {
        // Proceed with form submission
    } else {
        // Handle validation failure
    }
};

Related Pages

• EForm