@aqpdev/react-form-validation v1.0.3

react-form-validation

React hook to validate form values inspired in CodeIgniter (PHP framework).

Installation

npm i @aqpdev/react-form-validation

Usage

import React from "react"
import {useFormValidation} from "@aqpdev/react-form-validation";

export default function Home() {
    const {handleForm, hasErrors, showError} = useFormValidation([
        {
            field_name: "username",
            rules: "required|min_length[5]|alpha_dash",
            errors: {
                required: "Username is required.",
                min_length: "Username must contains at least 5 characters.",
                alpha_dash: "Username may only contain alpha-numeric characters, underscores, and dashes."
            }
        },
        {
            field_name: "password",
            rules: "required|min_length[6]|alpha_with_upper_numeric_special",
            errors: {
                required: "Password is required.",
                min_length: "Password must contains at least 6 characters.",
                alpha_with_upper_numeric_special: "Password must contains letters (lowercase and uppercase), numbers and special characters.",
            }
        },
        {
            field_name: "confirm_password",
            rules: "required|matches[password]",
            errors: {
                required: "Confirm your password.",
                matches: "Passwords do not match.."
            }
        },
        {
            field_name: "email",
            rules: "required|valid_email",
            errors: {
                required: "Enter your email address.",
                valid_email: "Email address is not valid."
            }
        }
    ]);

    const myHandle = (data) => {
        //Data returns a JSON of form elements
        console.log(data);
    }

    return (
        <form onSubmit={(e) => handleForm(e, myHandle)}>
            <div className="mb-3">
                <label className="form-label">Username</label>
                <input type="text" name="username" className="form-control"/>
                {hasErrors('username') && <div className="text-danger">{showError('username')}</div>}
            </div>

            <div className="mb-3">
                <label className="form-label">Password</label>
                <input type="password" name="password" className="form-control"/>
                {hasErrors('password') && <div className="text-danger">{showError('password')}</div>}
            </div>

            <div className="mb-3">
                <label className="form-label">Confirm Password</label>
                <input type="password" name="confirm_password" className="form-control"/>
                {hasErrors('confirm_password') && <div className="text-danger">{showError('confirm_password')}</div>}
            </div>

            <div className="mb-3">
                <label className="form-label">Email</label>
                <input type="text" name="email" className="form-control"/>
                {hasErrors('email') && <div className="text-danger">{showError('email')}</div>}
            </div>

            <div>
                <button className="btn btn-primary">Submit</button><br/>
                <button type="button" className="btn btn-primary">Button blocked</button><br/>
            </div>
        </form>
    )
}

Rules Reference