Formydable

is a form validator library that is delightfully made in react. It is so light with unique setting and cognitive design. the rules are eloquent which will make the schema so powerful yet easy to understand, and implement on any kind of components. unlike any other form validator library, formydable is complex that allows you to bend and shape it on almost what ever you want. furthermore, formydable is capable on working both controllable and uncontrollable form fields and to know more just read the documentation below.

Installation #

npm i formydable

Imports #

import { useForm, useFormSupplier, FormSupplier, Validator, DoneTypingEvent } from "formydable"

Getting Started #

This is a react form validator that is delightfully made by mytabowrks which is blazingly fast and can be easily use and implement in any field components with ease.

import React from "react";
import { useForm } from "formydable";

const FormBasic = () => {
    const registerSchema = {
        fname: { label: "First Name", rules: "required|alpha|min:3" },
        lname: { label: "Last Name", rules: "required|alpha|min:3|max:20" }, 
    };

    const { formState, formUpdate } = useForm(registerSchema);

    const { fname, lname } = formState(); 
    
    return ( 
        <form> 
            <div className="n-form-field">
                <label>First Name</label>
                <input 
                    className="n-form-control"
                    name="fname" 
                    placeholder="first name..."
                    onChange={formUpdate}
                />
                {fname.isInvalid && <div className="error-feedback">{fname.message}</div>}
            </div>
            <div className="n-form-field">
                <label>Last Name</label>
                <input 
                    className="n-form-control"
                    name="lname"
                    placeholder="last name..."
                    onChange={formUpdate}
                /> 
                {lname.isInvalid && <div className="error-feedback">{lname.message}</div>} 
            </div>
        </form> 
    );
}

#render(<FormBasic />)import React from "react";
import { useForm } from "formydable";
const FormBasic = () => {
    const registerSchema = {
        fname: { label: "First Name", rules: "required|alpha|min:3" },
        lname: { label: "Last Name", rules: "required|alpha|min:3|max:20" }, 
    };
    const { formState, formUpdate } = useForm(registerSchema);
    const { fname, lname } = formState(); 
    
    return ( 
        <form> 
            <div className="n-form-field">
                <label>First Name</label>
                <input 
                    className="n-form-control"
                    name="fname" 
                    placeholder="first name..."
                    onChange={formUpdate}
                />
                {fname.isInvalid && <div className="error-feedback">{fname.message}</div>}
            </div>
            <div className="n-form-field">
                <label>Last Name</label>
                <input 
                    className="n-form-control"
                    name="lname"
                    placeholder="last name..."
                    onChange={formUpdate}
                /> 
                {lname.isInvalid && <div className="error-feedback">{lname.message}</div>} 
            </div>
        </form> 
    );
}
#render(<FormBasic />)
First Name
Last Name

Tip

Rules validation order is from left to right. it will validate firstly the one on the left side which is the most priority. commonly required rule.

Controllable Fields #

you can make controllable fields without a sweat. just add a single line and you are done.

import React from "react";
import { useForm } from "formydable";

const FormControllable = () => {
    const usernameDefault = "mytabworks"
    const registerSchema = {
        username: { label: "Username", rules: "required|alpha_slug|min:5", value: usernameDefault },
        email: { label: "E-mail", rules: "required|email" }, 
    };

    const { formState, formUpdate } = useForm(registerSchema);

    const { username, email } = formState(); 
    
    return ( 
        <form> 
            <div className="n-form-field">
                <label>Username</label>
                <input 
                    className="n-form-control"
                    name="username"
                    value={username.value}
                    placeholder="username..."
                    onChange={formUpdate}
                />
                {username.isInvalid && <div className="error-feedback">{username.message}</div>}
            </div>
            <div className="n-form-field">
                <label>E-mail</label>
                <input 
                    className="n-form-control"
                    name="email"
                    value={email.value}
                    placeholder="e-mail..."
                    onChange={formUpdate}
                /> 
                {email.isInvalid && <div className="error-feedback">{email.message}</div>} 
            </div>
        </form> 
    );
}

#render(<FormControllable />)import React from "react";
import { useForm } from "formydable";
const FormControllable = () => {
    const usernameDefault = "mytabworks"
    const registerSchema = {
        username: { label: "Username", rules: "required|alpha_slug|min:5", value: usernameDefault },
        email: { label: "E-mail", rules: "required|email" }, 
    };
    const { formState, formUpdate } = useForm(registerSchema);
    const { username, email } = formState(); 
    
    return ( 
        <form> 
            <div className="n-form-field">
                <label>Username</label>
                <input 
                    className="n-form-control"
                    name="username"
                    value={username.value}
                    placeholder="username..."
                    onChange={formUpdate}
                />
                {username.isInvalid && <div className="error-feedback">{username.message}</div>}
            </div>
            <div className="n-form-field">
                <label>E-mail</label>
                <input 
                    className="n-form-control"
                    name="email"
                    value={email.value}
                    placeholder="e-mail..."
                    onChange={formUpdate}
                /> 
                {email.isInvalid && <div className="error-feedback">{email.message}</div>} 
            </div>
        </form> 
    );
}
#render(<FormControllable />)
Username
E-mail

Customize Messages #

you can make your own static rule messages by using "failedIn" without affecting the rules messages model.

import React from "react";
import { useForm } from "formydable";

const CustomMesssages = () => {
    const registerSchema = {
        reaction: { label: "Reactions", rules: "required|alpha_space|min:10|max:20" }
    };

    const { formState, formUpdate } = useForm(registerSchema);

    const reaction = formState("reaction"); 
    
    return ( 
        <form>   
            <div className={`n-form-field${reaction.isInvalid 
                ? " n-form-invalid" 
                : reaction.isValidated 
                    ? " n-form-valid" 
                    : ""}`
                }>
                <label>what is on your mind?</label>
                <textarea 
                    className="n-form-control"
                    name="reaction"
                    value={reaction.value}
                    placeholder="try type anything..."
                    onChange={formUpdate}
                />
                {reaction.isInvalid && <div className="n-invalid-feedback">{
                    reaction.failedIn === "min" 
                    ? "That is too short" 
                    : reaction.failedIn === "max" 
                    ? "That is too long"
                    : reaction.message }
                </div>} 
                <div className="n-valid-feedback"><span role="img">✔️</span> Looks Good!</div>
            </div>
        </form> 
    );
}

#render(<CustomMesssages />)import React from "react";
import { useForm } from "formydable";
const CustomMesssages = () => {
    const registerSchema = {
        reaction: { label: "Reactions", rules: "required|alpha_space|min:10|max:20" }
    };
    const { formState, formUpdate } = useForm(registerSchema);
    const reaction = formState("reaction"); 
    
    return ( 
        <form>   
            <div className={`n-form-field${reaction.isInvalid 
                ? " n-form-invalid" 
                : reaction.isValidated 
                    ? " n-form-valid" 
                    : ""}`
                }>
                <label>what is on your mind?</label>
                <textarea 
                    className="n-form-control"
                    name="reaction"
                    value={reaction.value}
                    placeholder="try type anything..."
                    onChange={formUpdate}
                />
                {reaction.isInvalid && <div className="n-invalid-feedback">{
                    reaction.failedIn === "min" 
                    ? "That is too short" 
                    : reaction.failedIn === "max" 
                    ? "That is too long"
                    : reaction.message }
                </div>} 
                <div className="n-valid-feedback"><span role="img">✔️</span> Looks Good!</div>
            </div>
        </form> 
    );
}
#render(<CustomMesssages />)
what is on your mind?✔️ Looks Good!

Remember setting a schema only works once and will never change again after, because that is how react useState works. but if you want to update constantly the schema or the default value like when you are updating information, you can unmount the component(which you put the useForm) after submit then mount it again when you are about to update information...

Submitting Form #

form only exist to submit that is why it is not complete without submitting it on server side.

import React from "react";
import { useForm } from "formydable"; 

const FormWithSubmit = () => {
    const registerSchema = { 
        gender: { label: "Gender", rules: "required" },
        biography: { label: "Biography", rules: "required|alpha_space|min:20|max:100" },
        "languages[]": { label: "Language You Like", rules: "required|min:2|max:3" }
    };
    
    const { formState, formUpdate, formSubmit } = useForm(registerSchema);

    const { gender, biography, "languages[]": languages } = formState(); 

    const formSubmitHandler = formSubmit((event) => {
        if (event.isReady()) {
            MockRequest("/mock/url-encoded/request", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: event.param()
            }) 
            .then((response) => { 
                Alert(response.json(), "success")
            })

            event.reset()
            
        } else {
            Alert("Failed! all field rules must fulfilled", "danger")
            event.locateFailed()
        }
    }); 

    const messageDisplay = (fieldstate) => fieldstate.isInvalid && <div className="error-feedback">{fieldstate.message}</div>
    
    return ( 
        <form onSubmit={formSubmitHandler}>  
            <div className="n-form-field">
                <label>Gender</label>
                <select className="n-form-control" name="gender" onChange={formUpdate}>
                    <option value="">Choose gender</option>
                    <option value="1">Male</option>
                    <option value="2">Female</option>
                </select>  
                {messageDisplay(gender)}
            </div> 
            <div className="n-form-field">
                <label>Biography</label>
                <textarea className="n-form-control" name="biography" onChange={formUpdate} />
                {messageDisplay(biography)} 
            </div>
            <div className="n-form-field">
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="js" onClick={formUpdate} />
                    js
                </label>
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="c#" onClick={formUpdate} />
                    c#
                </label>
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="c++" onClick={formUpdate} />
                    c++
                </label>
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="python" onClick={formUpdate} />
                    python
                </label>
            </div>
            {messageDisplay(languages)}
            <button type="submit" className="n-btn">Submit</button>
        </form> 
    );
}

#render(<FormWithSubmit/>)import React from "react";
import { useForm } from "formydable"; 
const FormWithSubmit = () => {
    const registerSchema = { 
        gender: { label: "Gender", rules: "required" },
        biography: { label: "Biography", rules: "required|alpha_space|min:20|max:100" },
        "languages[]": { label: "Language You Like", rules: "required|min:2|max:3" }
    };
    
    const { formState, formUpdate, formSubmit } = useForm(registerSchema);
    const { gender, biography, "languages[]": languages } = formState(); 
    const formSubmitHandler = formSubmit((event) => {
        if (event.isReady()) {
            MockRequest("/mock/url-encoded/request", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: event.param()
            }) 
            .then((response) => { 
                Alert(response.json(), "success")
            })
            event.reset()
            
        } else {
            Alert("Failed! all field rules must fulfilled", "danger")
            event.locateFailed()
        }
    }); 
    const messageDisplay = (fieldstate) => fieldstate.isInvalid && <div className="error-feedback">{fieldstate.message}</div>
    
    return ( 
        <form onSubmit={formSubmitHandler}>  
            <div className="n-form-field">
                <label>Gender</label>
                <select className="n-form-control" name="gender" onChange={formUpdate}>
                    <option value="">Choose gender</option>
                    <option value="1">Male</option>
                    <option value="2">Female</option>
                </select>  
                {messageDisplay(gender)}
            </div> 
            <div className="n-form-field">
                <label>Biography</label>
                <textarea className="n-form-control" name="biography" onChange={formUpdate} />
                {messageDisplay(biography)} 
            </div>
            <div className="n-form-field">
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="js" onClick={formUpdate} />
                    js
                </label>
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="c#" onClick={formUpdate} />
                    c#
                </label>
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="c++" onClick={formUpdate} />
                    c++
                </label>
                <label className="n-form-check">
                    <input className="n-form-control" type="checkbox" name="languages[]" value="python" onClick={formUpdate} />
                    python
                </label>
            </div>
            {messageDisplay(languages)}
            <button type="submit" className="n-btn">Submit</button>
        </form> 
    );
}
#render(<FormWithSubmit/>)
Gender
Biography
jsc#c++python

The fields which are not registered from the schema are excluded from FormEvent method json, param and paramArray.

If you want to involve the unregistered field. You can always use FormEvent method formData that will return FormData instance.

Advance Design Pattern #

We use FormSupplier to provide formState, formUpdate and formRegistry to children components, and we use useFormSupplier to get FormSupplier provided to children components

import React from "react";
import { useForm, useFormSupplier, FormSupplier } from "formydable"; 

const FormWrapper = ({children, onSubmit}) => {
    const { formState, formUpdate, formSubmit, formRegistry } = useForm();
    
    const formSubmitHandler = formSubmit(onSubmit);  
    
    return ( 
        <FormSupplier value={{ formState, formUpdate, formRegistry }}>
            <form onSubmit={formSubmitHandler}> 
                {children}
                <button type="submit" className="n-btn">Submit</button>
            </form>
        </FormSupplier> 
    );
}

const InputWithRules = ({type = "text", name, label, rules, value = "", placeholder = "enter here...", id}) => { 

    const { formState, formUpdate, formRegistry } = useFormSupplier(); 
 
    formRegistry({ name, label, rules, value }) 
    
    const fieldstate = formState(name); 
    
    const validity = (
            fieldstate.isInvalid 
            ? "n-form-invalid" 
            : fieldstate.isValidated 
            ? "n-form-valid"
            : ""
        )

    return ( 
        <div className={`n-form-field ${validity}`}>
            <label htmlFor={id || name}>
                {label}
                {rules.includes("required") && (
                    <span className="label-required">*</span>
                )}
            </label>
            <input 
                className="n-form-control"
                id={id || name}
                type={type}
                name={name}
                value={type !== "file" ? fieldstate.value : undefined}
                placeholder={placeholder}
                onChange={formUpdate} 
            /> 
            <div className="n-invalid-feedback">
                {fieldstate.isInvalid && fieldstate.message}
            </div> 
            <div className="n-valid-feedback">
                <span role="img">✔️</span> Looks good!
            </div>  
        </div>
    );
}

const MockSubmit = (event) => {
    if (event.isReady()) {  
        MockRequest("/mock/json/request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: event.json()
        }) 
        .then((response) => {
            Alert(response.json(), "success")
        }) 

        event.reset() 

    } else {
        Alert("Failed! all field rules must fulfilled", "danger")
        event.locateFailed()
    }
}

#render(
    <FormWrapper onSubmit={MockSubmit}>
        <InputWithRules name="fname" label="First Name" rules="required|alpha|min:3" />
        <InputWithRules name="lname" label="Last Name" rules="required" />
        <InputWithRules name="email" label="E-mail" rules="required|email" />
        <InputWithRules type="file" name="resume" label="Resume" rules="mimes:pdf,png|min_size:100|max_size:1000" />
    </FormWrapper>
)import React from "react";
import { useForm, useFormSupplier, FormSupplier } from "formydable"; 
const FormWrapper = ({children, onSubmit}) => {
    const { formState, formUpdate, formSubmit, formRegistry } = useForm();
    
    const formSubmitHandler = formSubmit(onSubmit);  
    
    return ( 
        <FormSupplier value={{ formState, formUpdate, formRegistry }}>
            <form onSubmit={formSubmitHandler}> 
                {children}
                <button type="submit" className="n-btn">Submit</button>
            </form>
        </FormSupplier> 
    );
}
const InputWithRules = ({type = "text", name, label, rules, value = "", placeholder = "enter here...", id}) => { 
    const { formState, formUpdate, formRegistry } = useFormSupplier(); 
 
    formRegistry({ name, label, rules, value }) 
    
    const fieldstate = formState(name); 
    
    const validity = (
            fieldstate.isInvalid 
            ? "n-form-invalid" 
            : fieldstate.isValidated 
            ? "n-form-valid"
            : ""
        )
    return ( 
        <div className={`n-form-field ${validity}`}>
            <label htmlFor={id || name}>
                {label}
                {rules.includes("required") && (
                    <span className="label-required">*</span>
                )}
            </label>
            <input 
                className="n-form-control"
                id={id || name}
                type={type}
                name={name}
                value={type !== "file" ? fieldstate.value : undefined}
                placeholder={placeholder}
                onChange={formUpdate} 
            /> 
            <div className="n-invalid-feedback">
                {fieldstate.isInvalid && fieldstate.message}
            </div> 
            <div className="n-valid-feedback">
                <span role="img">✔️</span> Looks good!
            </div>  
        </div>
    );
}
const MockSubmit = (event) => {
    if (event.isReady()) {  
        MockRequest("/mock/json/request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: event.json()
        }) 
        .then((response) => {
            Alert(response.json(), "success")
        }) 
        event.reset() 
    } else {
        Alert("Failed! all field rules must fulfilled", "danger")
        event.locateFailed()
    }
}
#render(
    <FormWrapper onSubmit={MockSubmit}>
        <InputWithRules name="fname" label="First Name" rules="required|alpha|min:3" />
        <InputWithRules name="lname" label="Last Name" rules="required" />
        <InputWithRules name="email" label="E-mail" rules="required|email" />
        <InputWithRules type="file" name="resume" label="Resume" rules="mimes:pdf,png|min_size:100|max_size:1000" />
    </FormWrapper>
)
First Name*
✔️ Looks good!
Last Name*
✔️ Looks good!
E-mail*
✔️ Looks good!
Resume
✔️ Looks good!

Aliased Registry #

It is inevitable that some form fields are multiple with the same name on it, the problem is we wanted to add those new or other fields into form state registry. for that reason formydable use alias registry and make a counter measure about those stuffs.

import React from "react";
import { useFormSupplier } from "formydable"; 

const InputMultiple = (props) => {

    const [fields, setFields] = React.useState([
        {...props, alias: `unique-id-${Math.random()}`}
    ]); 

    return (
        <div className="n-form-field">
            <label htmlFor={props.name}>{props.label}</label>
            {fields.map((field, index) => {  
                const btnLabel = index === 0 ? "add" : "remove"
                const handleClick = () => {  
                    setFields((state) => {
                        return index === 0 
                        ? [
                            ...state,
                            {
                                ...props,
                                alias: `unique-id-${Math.random()}`,
                            }
                        ] 
                        : state.filter((value) => value.alias !== field.alias)
                    }) 
                } 

                return ( 
                    <InputWithAliasRules key={field.alias} btnLabel={btnLabel} onClick={handleClick} {...field} /> 
                )   
            })} 
        </div>
    )
}

const InputWithAliasRules = ({  type = "text", name, alias, label, rules, placeholder = "enter here...", btnLabel, onClick}) => { 
    
    const { formState, formUpdate, formRegistry } = useFormSupplier(); 
 
    formRegistry({ name, label, rules, alias })
    
    const fieldstate = formState(alias);
    
    const handleFieldChange = (event) => { 
        formUpdate({ target: event.target }, alias);
    }; 
    
    const validity = (
        fieldstate.isInvalid 
        ? "n-form-invalid" 
        : fieldstate.isValidated 
        ? "n-form-valid"
        : ""
    )

    return (   
        <div className={`n-form-field ${validity}`}>
            <div className="n-input-group"> 
                <input 
                    className="n-form-control"
                    id={name}
                    type={type}
                    name={name}
                    data-alias={alias}
                    placeholder={placeholder}
                    onChange={handleFieldChange} 
                /> 
                <div className="n-input-group-append">
                    <button
                        className="n-btn" 
                        type="button"
                        onClick={onClick}>
                        {btnLabel}
                    </button>
                </div>  
            </div>
            <div className="n-invalid-feedback">
                {fieldstate.isInvalid && fieldstate.message}
            </div> 
            <div className="n-valid-feedback">
                <span role="img">✔️</span> Looks good!
            </div>
        </div>   
    );
}

#render(
    <FormWrapper onSubmit={MockSubmit}>
        <InputMultiple name="favorites" label="Favorites" rules="required|alpha|min:2" />
    </FormWrapper>
);import React from "react";
import { useFormSupplier } from "formydable"; 
const InputMultiple = (props) => {
    const [fields, setFields] = React.useState([
        {...props, alias: `unique-id-${Math.random()}`}
    ]); 
    return (
        <div className="n-form-field">
            <label htmlFor={props.name}>{props.label}</label>
            {fields.map((field, index) => {  
                const btnLabel = index === 0 ? "add" : "remove"
                const handleClick = () => {  
                    setFields((state) => {
                        return index === 0 
                        ? [
                            ...state,
                            {
                                ...props,
                                alias: `unique-id-${Math.random()}`,
                            }
                        ] 
                        : state.filter((value) => value.alias !== field.alias)
                    }) 
                } 
                return ( 
                    <InputWithAliasRules key={field.alias} btnLabel={btnLabel} onClick={handleClick} {...field} /> 
                )   
            })} 
        </div>
    )
}
const InputWithAliasRules = ({  type = "text", name, alias, label, rules, placeholder = "enter here...", btnLabel, onClick}) => { 
    
    const { formState, formUpdate, formRegistry } = useFormSupplier(); 
 
    formRegistry({ name, label, rules, alias })
    
    const fieldstate = formState(alias);
    
    const handleFieldChange = (event) => { 
        formUpdate({ target: event.target }, alias);
    }; 
    
    const validity = (
        fieldstate.isInvalid 
        ? "n-form-invalid" 
        : fieldstate.isValidated 
        ? "n-form-valid"
        : ""
    )
    return (   
        <div className={`n-form-field ${validity}`}>
            <div className="n-input-group"> 
                <input 
                    className="n-form-control"
                    id={name}
                    type={type}
                    name={name}
                    data-alias={alias}
                    placeholder={placeholder}
                    onChange={handleFieldChange} 
                /> 
                <div className="n-input-group-append">
                    <button
                        className="n-btn" 
                        type="button"
                        onClick={onClick}>
                        {btnLabel}
                    </button>
                </div>  
            </div>
            <div className="n-invalid-feedback">
                {fieldstate.isInvalid && fieldstate.message}
            </div> 
            <div className="n-valid-feedback">
                <span role="img">✔️</span> Looks good!
            </div>
        </div>   
    );
}
#render(
    <FormWrapper onSubmit={MockSubmit}>
        <InputMultiple name="favorites" label="Favorites" rules="required|alpha|min:2" />
    </FormWrapper>
);
Favorites
✔️ Looks good!

FormUpdate With DoneTypingEvent #

It is use to fire the event after user is done typing, that will save a lot of unessesary execution of state changes while typing.

import React from "react";
import { useFormSupplier, DoneTypingEvent } from "formydable"; 

const InputDoneTypingWithRules = ({  type = "text", name, label, rules, placeholder = "enter here...", id}) => { 

    const { formState, formUpdate, formRegistry } = useFormSupplier(); 
 
    formRegistry({ name, label, rules }) 
    
    const fieldstate = formState(name);
    
    const handleDoneTyping = DoneTypingEvent((event) => {
        formUpdate({ target: event.target });
    }, 300); 
    
    const validity = (
        fieldstate.isInvalid 
        ? "n-form-invalid" 
        : fieldstate.isValidated 
        ? "n-form-valid"
        : ""
    )

    return ( 
        <div className={`n-form-field ${validity}`}>
            <label htmlFor={id || name}>
                {label}
                {rules.includes('required') && (
                    <span className='label-required'>*</span>
                )}
            </label>
            <input 
                className="n-form-control"
                id={id || name}
                type={type}
                name={name}
                placeholder={placeholder}  
                {...handleDoneTyping}
            /> 
            <div className="n-invalid-feedback">
                {fieldstate.isInvalid && fieldstate.message}
            </div> 
            <div className="n-valid-feedback">
                Looks good!
            </div>  
        </div>
    );
}

#render(
    <FormWrapper onSubmit={MockSubmit}>   
        <InputDoneTypingWithRules name="done-typing" label="With DoneTypingEvent" rules="required|alpha|min:20|max:25" />
        <InputWithRules name="normal-change-event" label="Without DoneTypingEvent" rules="required|alpha|min:20|max:25" /> 
    </FormWrapper>
)import React from "react";
import { useFormSupplier, DoneTypingEvent } from "formydable"; 
const InputDoneTypingWithRules = ({  type = "text", name, label, rules, placeholder = "enter here...", id}) => { 
    const { formState, formUpdate, formRegistry } = useFormSupplier(); 
 
    formRegistry({ name, label, rules }) 
    
    const fieldstate = formState(name);
    
    const handleDoneTyping = DoneTypingEvent((event) => {
        formUpdate({ target: event.target });
    }, 300); 
    
    const validity = (
        fieldstate.isInvalid 
        ? "n-form-invalid" 
        : fieldstate.isValidated 
        ? "n-form-valid"
        : ""
    )
    return ( 
        <div className={`n-form-field ${validity}`}>
            <label htmlFor={id || name}>
                {label}
                {rules.includes('required') && (
                    <span className='label-required'>*</span>
                )}
            </label>
            <input 
                className="n-form-control"
                id={id || name}
                type={type}
                name={name}
                placeholder={placeholder}  
                {...handleDoneTyping}
            /> 
            <div className="n-invalid-feedback">
                {fieldstate.isInvalid && fieldstate.message}
            </div> 
            <div className="n-valid-feedback">
                Looks good!
            </div>  
        </div>
    );
}
#render(
    <FormWrapper onSubmit={MockSubmit}>   
        <InputDoneTypingWithRules name="done-typing" label="With DoneTypingEvent" rules="required|alpha|min:20|max:25" />
        <InputWithRules name="normal-change-event" label="Without DoneTypingEvent" rules="required|alpha|min:20|max:25" /> 
    </FormWrapper>
)
With DoneTypingEvent*
Looks good!
Without DoneTypingEvent*
✔️ Looks good!

Aliased Rule Parameters #

developer`s perspective is different with user`s. that is why you can always use aliases (@) to make user`s apprehend the messages

import React from "react";
import { useFormSupplier } from "formydable";

const RadioGender = () => {
    const { formState, formUpdate, formRegistry } = useFormSupplier() 
    
    const fieldstate = formState("gender")

    formRegistry({ name: "gender", label: "Gender", rules: "required", value: "1" })

    return (
        <div className="n-form-field">
            <label>Gender</label>
            <div>
                <label className="n-form-check-inline">
                    <input className="n-form-control" type="radio" name="gender" value="1" checked={fieldstate.value === "1"} onChange={formUpdate}/>
                    male
                </label>
                <label className="n-form-check-inline">
                    <input className="n-form-control" type="radio" name="gender" value="2" checked={fieldstate.value === "2"}  onChange={formUpdate}/>
                    female
                </label>
            </div>
            {fieldstate.isInvalid && <div className="error-feedback">{fieldstate.message}</div>}
        </div>
    );
} 

#render(
    <FormWrapper onSubmit={MockSubmit}>   
        <RadioGender />
        <InputWithRules name="normal-rules" label="Normal rules" rules="required_if:gender=1" />
        <InputWithRules name="aliased-rules" label="With Alias rules" rules="required_if:gender@Gender=1@male" />
    </FormWrapper>
)import React from "react";
import { useFormSupplier } from "formydable";
const RadioGender = () => {
    const { formState, formUpdate, formRegistry } = useFormSupplier() 
    
    const fieldstate = formState("gender")
    formRegistry({ name: "gender", label: "Gender", rules: "required", value: "1" })
    return (
        <div className="n-form-field">
            <label>Gender</label>
            <div>
                <label className="n-form-check-inline">
                    <input className="n-form-control" type="radio" name="gender" value="1" checked={fieldstate.value === "1"} onChange={formUpdate}/>
                    male
                </label>
                <label className="n-form-check-inline">
                    <input className="n-form-control" type="radio" name="gender" value="2" checked={fieldstate.value === "2"}  onChange={formUpdate}/>
                    female
                </label>
            </div>
            {fieldstate.isInvalid && <div className="error-feedback">{fieldstate.message}</div>}
        </div>
    );
} 
#render(
    <FormWrapper onSubmit={MockSubmit}>   
        <RadioGender />
        <InputWithRules name="normal-rules" label="Normal rules" rules="required_if:gender=1" />
        <InputWithRules name="aliased-rules" label="With Alias rules" rules="required_if:gender@Gender=1@male" />
    </FormWrapper>
)
Gendermalefemale
Normal rules*
✔️ Looks good!
With Alias rules*
✔️ Looks good!

Customize Rules #

you can make your own rules.

basicintermidiateadvance
import React from "react";
import { Validator } from "formydable"; 

const strong_password = {
    exe({received}) {  
        const test = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).+$/g.test(received);
        return received.length && !test;
    },
    message: "The :attribute must have 1 small letter, 1 capital letter, 1 number, and 1 special character" 
};

Validator.rulesExtend({ strong_password });

#render(
    <FormWrapper onSubmit={MockSubmit}> 
        <InputWithRules 
            type="password" 
            name="pass-strong" 
            label="Strong Password" 
            rules="required|strong_password|min:8" 
        />   
    </FormWrapper>
)import React from "react";
import { Validator } from "formydable"; 
const strong_password = {
    exe({received}) {  
        const test = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).+$/g.test(received);
        return received.length && !test;
    },
    message: "The :attribute must have 1 small letter, 1 capital letter, 1 number, and 1 special character" 
};
Validator.rulesExtend({ strong_password });
#render(
    <FormWrapper onSubmit={MockSubmit}> 
        <InputWithRules 
            type="password" 
            name="pass-strong" 
            label="Strong Password" 
            rules="required|strong_password|min:8" 
        />   
    </FormWrapper>
)
Strong Password*
✔️ Looks good!

Tip

Registering customize rules is once and for all.

Updating Rules Messages #

if you don`t like the default rules messages you can always do this to change it permanently.

import React from "react";
import { Validator } from "formydable";

Validator.rulesUpdateMessage("alpha_dash", "Oh no!! :attribute must be with dashes")
Validator.rulesUpdateMessage("same", "Oh Ow!! :attribute must be perfectly same with :same")

#render(
    <FormWrapper onSubmit={MockSubmit}>    
        <InputWithRules id="dash-id" name="dash-cases" label="Alpha Dashes" rules="required|alpha_dash" />
        <InputWithRules name="confirm" label="Confirm Match" rules="required|same:dash-id@Alpha Dashes" />
    </FormWrapper>
)import React from "react";
import { Validator } from "formydable";
Validator.rulesUpdateMessage("alpha_dash", "Oh no!! :attribute must be with dashes")
Validator.rulesUpdateMessage("same", "Oh Ow!! :attribute must be perfectly same with :same")
#render(
    <FormWrapper onSubmit={MockSubmit}>    
        <InputWithRules id="dash-id" name="dash-cases" label="Alpha Dashes" rules="required|alpha_dash" />
        <InputWithRules name="confirm" label="Confirm Match" rules="required|same:dash-id@Alpha Dashes" />
    </FormWrapper>
)
Alpha Dashes*
✔️ Looks good!
Confirm Match*
✔️ Looks good!

API

Rules #

Name	How to use	Description	Message
required	required	it will require the form field to be filled	The :attribute field is required
email	email	it will validate if the field contain a valid e-mail	The :attribute field must be valid email
min	min:<number>	it will validate the minumum character, number, checkbox is checked, select(multiple) is selected, file(multiple) is selected.e.g. min:10	The :attribute field must be atleast :min (character, items, files)
max	max:<number>	it will validate the maximum character, number, checkbox is checked, select(multiple) is selected, file(multiple) is selected.e.g. max:20	The :attribute field may not be greater than :max (character, items, files)
mimes	mimes:<files mimes>	it will validate the specific mimes of the files which are allowed.e.g. mimes:jpg,pdf,rar	The :attribute only allows :mimes
alpha	alpha	it will validate if the field value is only contain letter	The :attribute may only contain letters
alpha_space	alpha_space	it will validate if the field only contain letters with spaces	The :attribute must contain alphabet with spaces
alpha_num	alpha_num	it will validate if the field contain letters with numbers	The :attribute may only contain letters and numbers.
alpha_slug	alpha_slug	it will validate if the field contain letters, numbers, and underscore	The :attribute may only contain letters, numbers, and underscore.
alpha_dash	alpha_dash	it will validate if the field contain letters with numbers and dashes	The :attribute may only contain letters, numbers, and dashes.
url	url	it will validate if the field contain valid url	The :attribute must be a valid url.
max_size	max_size:<number>	it will validate if the field contain a maximum file size and the size must calculate in kilobytes.e.g. max_size:5000	The :attribute may not be greater :max_size kilobytes.
min_size	min_size:<number>	it will validate if the field contain a minimum file size and the size must calculate in kilobytes.e.g. min_size:1000	The :attribute must be atleast :min_size kilobytes.
required_if	required_if:<field_id>=<expected_value>	it will require the field, if the target field matches the expected value. you can use exact value or regular expression likerequired_if:bio=.+. .+ means has any value.e.g. required_if:country=AU since most of the time field ids are not the same as the labels and same with the values label. that is why you can use Aliasing(@)e.g. required_if:country@Country=AU@Australia	The :attribute field is required when :required_if is :value.
same	same:<field_id>	it will validate the field until the target field contain the same value.e.g. same:pass since most of the time field ids are not the same as the labels. you can use Aliasing(@)e.g. same:pass@Password	The :attribute and :same must match.

useForm #

it is use to register schema and to get formState, formUpdate, formSubmit, formRegistry.

Property Property	Type Type	Default Default	Description Description
const {
formState,	function	-	it is use to fetch the field state.
formUpdate,	function	-	it is use to update the field state. and it is commonly used directly in onChange event or if more complex you can use it inside the EventHandler.
formRegistry,	function	-	it is use to remotely register the field rules into the schema.
formSubmit	function	-	it is use to handle the submission of form field.
} = useForm(
schema?	object	-	it is the pre-registration of the fields.
)

FormSupplier #

it is use to set the useForm functions into useFormSupplier which you can use under FormSupplier as a wrapper.

Property Property	Type Type	Default Default	Description Description
value	object	-	it must contain the useForm funtions: formState, formUpdate, and formRegistry which will be supply to all of its descendant using useFormSupplier.

useFormSupplier #

it is use to fetch FormSupplier provided.

Property Property	Type Type	Default Default	Description Description
const {
formState,	function	-	it is use to fetch the field state.
formUpdate,	function	-	it is use to update the field state. and it is commonly used directly in onChange event or if more complex you can use it inside the EventHandler.
formRegistry,	function	-	it is use to remotely register the field rules into the schema.
} = useFormSupplier()

DoneTypingEvent #

it is use to fire the event after user done typing, that will save a lot of unessesary execution while typing.

Property Property	Type Type	Default Default	Description Description
DoneTypingEvent(
callback,	function	-	it is the callback function when the user stop typing.
delay	number	700	it is the miliseconds aloted for users typing, if its exceeded on aloted time then it will know that the user stops typing.
)

Validator

Validator.rulesExtend #

it is use to make your own rules.

Property Property	Type Type	Default Default	Description Description
Validator.rulesExtend({
[ruleName]	object	-	your rule name.
})

Validator.rulesUpdateMessage #

it is use to change the message of the existing rules.

Property Property	Type Type	Default Default	Description Description
Validator.rulesUpdateMessage({
ruleName,	string	-	the name of the rule you want to update the message
message	string	-	it is the message template will be displayed when your rules is invalid.
})

DARK THEME

Formydable

API

Validator

Warning!