@aqpdev/react-form-validation

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

Rule	Parameter	Description	Example
required	No	Returns error if the form element is empty.
matches	Yes	Returns error if the form element does not match the one in the parameter.	matches[form_item]
regex_match	Yes	Returns error is the form element does not match the regular expresion.	regex_match[/regex/]
differs	Yes	Returns error if the form element does not differ from the one in the parameter.	differs[form_item]
min_length	Yes	Returns error if the form element is shorter than the parameter value.	min_length[3]
max_length	Yes	Returns error if the form element is longer than the parameter value.	max_length[12]
exact_length	Yes	Returns error if the form element is not exactly the parameter value.	exact_length[8]
greater_than	Yes	Returns error if the form element is less than or equal to the parameter value or not numeric.	greater_than[8]
greater_than_equal_to	Yes	Returns error if the form element is less than the parameter value, or not numeric.	greater_than_equal_to[8]
less_than	Yes	Returns error if the form element is greater than or equal to the parameter value or not numeric.	less_than[8]
less_than_equal_to	Yes	Returns error if the form element is greater than the parameter value, or not numeric.	less_than_equal_to[8]
in_list	Yes	Returns error if the form element is not within a predetermined list.	in_list[red,blue,green]
alpha	No	Returns error if the form element contains anything other than alphabetical characters.
alpha_numeric	No	Returns error if the form element contains anything other than alpha-numeric characters.
alpha_numeric_spaces	No	Returns error if the form element contains anything other than alpha-numeric characters or spaces. Should be used after trim to avoid spaces at the beginning or end.
alpha_dash	No	Returns error if the form element contains anything other than alpha-numeric characters, underscores or dashes.
alpha_and_numeric	No	Returns error if the form element does not contain letters and numbers.
alpha_with_upper_and_numeric	No	Returns error if the form element does not contain letters (lowercase and uppercase) and numbers.
alpha_with_upper_numeric_special	No	Returns error if the form element does not contain letters (lowercase and uppercase), numbers and special characters.
numeric	No	Returns error if the form element contains anything other than numeric characters.
integer	No	Returns error if the form element contains anything other than an integer.
decimal	No	Returns error if the form element contains anything other than a decimal number.
is_natural	No	Returns error if the form element contains anything other than a natural number: 0, 1, 2, 3, etc.
is_natural_no_zero	No	Returns error if the form element contains anything other than a natural number, but not zero: 1, 2, 3, etc.
valid_url	No	Returns error if the form element does not contain a valid URL.
valid_email	No	Returns error if the form element does not contain a valid email address.
valid_ip	No	Returns error if the form element does not contain a valid IP address (‘ipv4’ or ‘ipv6’).
if_requires	Yes	Returns error if the form element is filled and the other form element (parameter) is empty.	if_requires[form_item]
if_use_requires	Yes	Returns error if the form element is equal to first parameter and the other form element (second parameter) is empty.	if_requires[user,form_item]