aml-hash-form v1.1.2

Aml Hash Form With Validator (React)

A really simple # tag based form validation for Reactjs.

Installation

This module is distributed via npm and should be installed as one of your project's dependencies:

npm install aml-hash-form

This library has peerDependencies listings for react.

Basic Examples (Single Form)

import React from 'react';
import AmlHashForm from "aml-hash-form";

function SingleForm(props) {

    const formFields = {
        email: { validate: ["req", "email"] },
        password: { validate: ["req", "min:5", "max:10"] },
    }

    const { fields, errors, handleChange, handleSubmit } = AmlHashForm(formFields);

    // handler
    const onSubmit = () => {
        let isValid = handleSubmit();
        if (isValid) {
            alert("Great!");
        }
    }

    return (
        <div>
            <div>
                <p><b>Email</b></p>
                <input type="text" name="email" placeholder="Enter the email" onChange={handleChange} value={fields.email} />
                <p style={{ color: "red" }}>{errors.email}</p>
            </div>
            <div>
                <p><b>Password</b></p>
                <input type="text" name="password" placeholder="Password" onChange={handleChange} value={fields.password} />
                <p style={{ color: "red" }}>{errors.password}</p>
            </div>
            <button type="button" onClick={onSubmit}>Submit</button>
        </div>
    )
}

export default SingleForm;

Multiple Form

import React from 'react';
import AmlHashForm from "aml-hash-form";

function MultipleForm(props) {

    // Form 1
    const formFields = {
        email: { validate: ["req", "email"] },
        password: { validate: ["req", "min:5", "max:10"] },
    }

    const { fields, errors, handleChange, handleSubmit } = AmlHashForm(formFields);

    // Form 2
    const formFields2 = {
        email: { validate: ["req", "email"] },
        password: { validate: ["req", "min:5", "max:10"] },
    }

    const { fields: fields2, errors: errors2, handleChange: handleChange2, handleSubmit: handleSubmit2 } = AmlHashForm(formFields2);

    // handler
    const onSubmit = () => {
        let isValid = handleSubmit();
        if (isValid) {
            alert("Form 1 Success!");
        }
    }

    const onSubmit2 = () => {
        let isValid = handleSubmit2();
        if (isValid) {
            alert("Form 2 Success!");
        }
    }

    return (
        <div>
            {/* Form 1 */}
            <h3 style={{ color: "green" }}>Form 1</h3>
            <div>
                <div>
                    <p><b>Email</b></p>
                    <input type="text" name="email" placeholder="Enter the email" onChange={handleChange} value={fields.email} />
                    <p style={{ color: "red" }}>{errors.email}</p>
                </div>
                <div>
                    <p><b>Password</b></p>
                    <input type="text" name="password" placeholder="Password" onChange={handleChange} value={fields.password} />
                    <p style={{ color: "red" }}>{errors.password}</p>
                </div>
                <button type="button" onClick={onSubmit}>Submit</button>
            </div>
            {/* Form 2 */}
            <h3 style={{ color: "green" }}>Form 2</h3>
            <div>
                <div>
                    <p><b>Email</b></p>
                    <input type="text" name="email" placeholder="Enter the email" onChange={handleChange2} value={fields2.email} />
                    <p style={{ color: "red" }}>{errors2.email}</p>
                </div>
                <div>
                    <p><b>Password</b></p>
                    <input type="text" name="password" placeholder="Password" onChange={handleChange2} value={fields2.password} />
                    <p style={{ color: "red" }}>{errors2.password}</p>
                </div>
                <button type="button" onClick={onSubmit2}>Submit</button>
            </div>
        </div>
    )
}

export default MultipleForm;

Advanced Form

Just add # to override default message it's very easy! see the below example.

import React, { useEffect } from 'react';
import AmlHashForm from "aml-hash-form";
import Select from 'react-select';

function AdvancedForm(props) {
    const selectDefault = { label: "", value: "" };

    const formFields = {
        email: { validate: ["req#Email address is required", "email#Please enter a valid email address"] },
        password: { validate: ["req#Password is required", "min:5#Your password length must be atleast 5", "max:10#Your password length must be below 10"] },
        confirmPassword: { validate: ["req", "min:5", "max:10", "sameAsField:password#Your password is not match"] },
        sameAs: { validate: ["req", "min:5", "max:10", "sameAs:Hello"] },
        equalTo: { validate: ["et:10.25"] },
        notEqualTo: { validate: ["net:10"] },
        lessThen: { validate: ["req", "lt:10.25"] },
        lessThenEqualTo: { validate: ["req", "lte:10"] },
        greterThan: { validate: ["req", "gt:10"] },
        greterThanEqualTo: { validate: ["req", "gte:10"] },
        allNumber: { validate: ["req", "type:number"] },
        pnNumber: { validate: ["req", "type:+-number"] },
        psFloat: { validate: ["req", "type:+float"] },
        onlyText: { validate: ["req", "type:text"] },
        regExp: { validate: ["regExp#Please type hello"], pattern: /Hello/g },
        boolInput: { value: false, validate: ["bool:true#Must be true"] },
        objValReq: { validate: ["objValReq#Please select the field"], obj: "value" },
        hashField: { validate: ["req#Showing ${amlHash} message"] },
        customErr: { validate: ["req"] }
    }

    const { fields, isField, errors, setValue, setMultiValue, setError, handleChange, handleSubmit } = AmlHashForm(formFields);

    // effect
    useEffect(() => {
        if (isField == "email") {
            console.log("Email changed")
        }
    }, [fields])

    // react select
    const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
    ];

    const onSelectChange = (data) => {
        if (data == null) {
            setValue("objValReq", selectDefault)
        } else {
            setValue("objValReq", data)
        }
    }

    // handler
    const onSubmit = () => {
        let isValid = handleSubmit();
        if (isValid) {
            alert("Success!");
        }
    }

    const customChange = (e) => {
        const { value } = e.target;
        setError("customErr", "");
        if (value !== "dharma") {
            setError("customErr", "Custom Error");
        }
        handleChange(e);
    }

    return (
        <div>
            <h4 style={{ color: "green" }}><strong>String Related</strong></h4>
            <div>
                <p><b>Email</b></p>
                <input type="text" name="email" placeholder="Enter the email" onChange={handleChange} value={fields.email} />
                <p style={{ color: "red" }}>{errors.email}</p>
            </div>
            <div>
                <p><b>Password</b></p>
                <input type="text" name="password" placeholder="Password" onChange={handleChange} value={fields.password} />
                <p style={{ color: "red" }}>{errors.password}</p>
            </div>
            <div>
                <p><b>Confirm Password</b></p>
                <input type="text" name="confirmPassword" placeholder="Confirm Password" onChange={handleChange} value={fields.confirmPassword} />
                <p style={{ color: "red" }}>{errors.confirmPassword}</p>
            </div>
            <div>
                <p><b>Same As String "Hello"</b></p>
                <input type="text" name="sameAs" placeholder="Same As String" onChange={handleChange} value={fields.sameAs} />
                <p style={{ color: "red" }}>{errors.sameAs}</p>
            </div>
            <div>
                <p><b>Only Text</b></p>
                <input type="text" name="onlyText" placeholder="Only Text" onChange={handleChange} value={fields.onlyText} />
                <p style={{ color: "red" }}>{errors.onlyText}</p>
            </div>

            <h4 style={{ color: "green" }}><strong>Operators Related</strong></h4>
            <div>
                <p><b>Equal to 10</b></p>
                <input type="text" name="equalTo" placeholder="Equal To" onChange={handleChange} value={fields.equalTo} />
                <p style={{ color: "red" }}>{errors.equalTo}</p>
            </div>

            <div>
                <p><b>Not Equal to 10</b></p>
                <input type="text" name="notEqualTo" placeholder="Not Equal to" onChange={handleChange} value={fields.notEqualTo} />
                <p style={{ color: "red" }}>{errors.notEqualTo}</p>
            </div>

            <div>
                <p><b>Less than 10</b></p>
                <input type="text" name="lessThen" placeholder="Less than" onChange={handleChange} value={fields.lessThen} />
                <p style={{ color: "red" }}>{errors.lessThen}</p>
            </div>

            <div>
                <p><b>Less than or equal to 10</b></p>
                <input type="text" name="lessThenEqualTo" placeholder="Less than or equal to" onChange={handleChange} value={fields.lessThenEqualTo} />
                <p style={{ color: "red" }}>{errors.lessThenEqualTo}</p>
            </div>

            <div>
                <p><b>Greater than 10</b></p>
                <input type="text" name="greterThan" placeholder="Greater than" onChange={handleChange} value={fields.greterThan} />
                <p style={{ color: "red" }}>{errors.greterThan}</p>
            </div>

            <div>patch
                <p><b>Greater than or equal to 10</b></p>
                <input type="text" name="greterThanEqualTo" placeholder="Greater than or equal to" onChange={handleChange} value={fields.greterThanEqualTo} />
                <p style={{ color: "red" }}>{errors.greterThanEqualTo}</p>
            </div>

            <h4 style={{ color: "green" }}><strong>Number Related</strong></h4>
            <div>
                <p><b>All Number (0.5, -0.5, 1, -1)</b></p>
                <input type="text" name="allNumber" placeholder="+ And - Numbers and float" onChange={handleChange} value={fields.allNumber} />
                <p style={{ color: "red" }}>{errors.allNumber}</p>
            </div>

            <div>
                <p><b>Number (+, -)</b></p>
                <input type="text" name="pnNumber" placeholder="+- number" onChange={handleChange} value={fields.pnNumber} />
                <p style={{ color: "red" }}>{errors.pnNumber}</p>
            </div>

            <div>
                <p><b>Float (+)</b></p>
                <input type="text" name="psFloat" placeholder="Only Float" onChange={handleChange} value={fields.psFloat} />
                <p style={{ color: "red" }}>{errors.psFloat}</p>
            </div>

            <h4 style={{ color: "green" }}><strong>Regular Expression</strong></h4>
            <div>
                <p><b>Regular Expression</b></p>
                <input type="text" name="regExp" placeholder="Regular Expression" onChange={handleChange} value={fields.regExp} />
                <p style={{ color: "red" }}>{errors.regExp}</p>
            </div>

            <div>
                <h4 style={{ color: "green" }}><strong>True Or False</strong></h4>
                <p><b>Check True</b></p>
                <div>
                    <p><b><input name="boolInput" type="checkbox" value={true} onChange={(e) => setValue("boolInput", (e.target.checked ? true : false))} checked={fields.boolInput ? true : false} />One</b></p>
                </div>
                <p style={{ color: "red" }}>{errors.boolInput}</p>
            </div>

            <h4 style={{ color: "green" }}><strong>Object Value Required</strong></h4>
            <div>
                <p><b>React Select</b></p>
                <Select
                    name="objValReq"
                    value={fields.objValReq}
                    isClearable={true}
                    onChange={onSelectChange}
                    options={options}
                />
                <p style={{ color: "red" }}>{errors.objValReq}</p>
            </div>

            <h4 style={{ color: "green" }}><strong>Need "#" in message</strong></h4>
            <div>
                <p><b>I need hash</b></p>
                <input type="text" name="hashField" placeholder="Hash field" onChange={customChange} value={fields.hashField} />
                <p style={{ color: "red" }}>{errors.hashField}</p>
            </div>

            <h4 style={{ color: "green" }}><strong>Custom Error</strong></h4>
            <div>
                <p><b>Custom Error</b></p>
                <input type="text" name="customErr" placeholder="Custom Error" onChange={customChange} value={fields.customErr} />
                <p style={{ color: "red" }}>{errors.customErr}</p>
            </div>
            <button type="button" onClick={onSubmit}>Submit</button>
        </div>
    )
}

export default AdvancedForm;

Form Object

Props

Common props you may want to specify include:

handleChange()

<input type="text" name="email" onChange={handleChange} value={fields.email} /> 

handleSubmit()

const onSubmit = () => {
    let isValid = handleSubmit();
    if (isValid) {
        alert("Success!");
    }
}
<button type="button" onClick={onSubmit}>Submit</button>

handleReset()

<button type="button" onClick={() => handleReset()}>Reset Form</button>

Thanks

Thank you to everyone who has helped to this project. Cheers!