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

| Validator | What it does? | Type | Example | | ------------- |:-------------:|:-------------:| -----:| | # | Override default message | Override | validate: ["req#Email address is required"] | | value | Set default value to field | Default | field: { value: "Default value", validate: ["req"] } | | req | For required field | required | validate: ["req"] | | email | Validate email address | email | validate: ["email"] | | min | Minimum character length | Length | validate: ["min:5"] | | max | Maximum character length | Length | validate: ["max:10#Max is Ten"] | | sameAs | Same as value | String | validate: ["sameAs:Hello"]| | sameAsField | Match field | Field | validate: ["sameAsField:password#Your password is not match"] | | et | Equal to | Number | validate: ["et:10"] | | net | Not Equal to | Number | validate: ["net:10"] | | lt | Less than | Number | validate: ["lt:10"] | | lte | Less than or Equal to | Number | validate: ["lte:10"] | | gt | Greater than | Number | validate: ["gt:10"] | | gte | Greater than or equal to | Number | validate: ["gte:10"] | | type:text | Only Text | type | validate: ["type:text"] | | type:number | Mixed Number | type | validate: ["type:number"] | | type:+-number | Only Postive and Negative Number | type | validate: ["type:+-number"] | | type:+float | Only Postive Float | type | validate: ["type:+float"] | | bool | Boolean (true or false) | Boolean | boolInput: { value: false, validate: ["bool:true#Must be true"] } | | regExp | Regular Expression | RegExp | regExp: { validate: ["regExp#Please type hello"], pattern: /Hello/g } | | objValReq | Validate inside an object | Object | objValReq: { validate: ["objValReq#Please select the field"], obj: "0.item.name" } | | ${amlHash} | If you really want # in your message use this. | # | hashField: { validate: ["req#Showing ${amlHash} message"] } |

Props

Common props you may want to specify include:

| Props | Usage | Example | | ------------- |:-------------:|:-------------:| | fields | Get fields | alert(fields.email) | | isField | Check current field | useEffect(() => { if (isField == "email") {console.log("Email changed") } }, [fields]) | | errors | Get Errors | console.log(errors.email) | | setValue() | Set single value | setValue("fieldName", "Value") | | setMultiValue({}) | Set multiple values | setMultiValue({"fieldName1":"Value1","fieldName2":"Value2"}) | | setError() | Set custom Error | setError("email", "Custom Error"); | | handleChange() | When change a field | See handleChange() Example below | | handleSubmit() | When submit a form | See handleSubmit() Example below | | handleReset() | When reset a form | See handleReset() Example below |

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!