Form

EForm provides a straightforward form validation system that uses functions as rules, allowing for fast and easy validation setup. We have used EForm component in the validation page Demo Here

Import

import EForm from "@components/EForm";

Usage

// ** React Imports
import {useState} from "react";

// ** Validation Imports
import {
  requiredValidator,
  emailValidator, 
  passwordValidator
} from "@validators";

// ** Custom Components Imports
import EForm from "@components/Form/EForm";
import EBtn from "@components/Elements/EBtn";
import EInput from "@components/Form/EInput";

const DemoValidationOnSubmit = () => {
    // ** States
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const submitHandler = (event, isFormValid) => {
        console.log(isFormValid); // True if all the form elements are validated successfully
    };

    return (
        <EForm
            onSubmit={submitHandler}
        >
            <div className="grid sm:grid-cols-2 gap-8">
                <EInput
                    name="email"
                    label="Email"
                    value={email}
                    rules={[requiredValidator]}
                    onChange={(event) => setEmail(event.target.value)}
                />

                <EInput
                    name="password"
                    label="Password"
                    type="password"
                    value={password}
                    rules={[requiredValidator, passwordValidator]}
                    onChange={(event) => setPassword(event.target.value)}
                />
            </div>
            <EBtn type="submit">
                Submit
            </EBtn>
        </EForm>
    );
};

export default EFormExample;

WARNING

Make sure to add the name prop to form element if you want to validate them on EForm submit. We use this prop as a unique key to provide a quick snapshot of the validity status for each item, allowing for efficient decision-making and troubleshooting.

Props

For EForm component, the following props are available:

Prop	Type	Default	Note
preventDefault	Boolean	true	Component's label
validateOn	String	"submit"	Triggers children validation on @values: submit, input, blur.
disabled	Boolean	false	Disables the form elements.
className	String	-	Overrides or extends the component's styles.

Callback Functions

The EForm component contains following callback functions.

Function	Description
onSubmit	The onSubmit event occurs when a form is submitted. function(event: React.SyntheticEvent, isFormValid: Boolean) => void 👇 • event: The event source of the callback. • isFormValid: Determines whether the form elements are valid .

Children

The EForm component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.