Skip to content

React validatable form hook that is used to create dynamic client side validations on react forms

License

Notifications You must be signed in to change notification settings

obss/react-validatable-form

Repository files navigation

React Validatable Form

React validatable form hook that is used to create dynamic client side validations on React forms.

examplegif


NPM (scoped) License GitHub contributors Github Issues Vulnerabilities Downloads Bundle Size


Table of Contents


Installation

react-validatable-form requires:

  • React 17.0.2 or later
yarn add react-validatable-form

or

npm install react-validatable-form

Getting Started

Setup ReactValidatableFormProvider

Wrap your App inside ReactValidatableFormProvider.

import { ReactValidatableFormProvider } from 'react-validatable-form';

// Wrap your app inside ReactValidatableFormProvider
const App = () => {
    return (
        <ReactValidatableFormProvider
            lang={'en'}
            customRules={null}
            translations={null}
            hideBeforeSubmit={true}
            showAfterBlur={true}
            focusToErrorAfterSubmit={true}
            elementFocusHandler={null}
        >
            <Main />
        </ReactValidatableFormProvider>
    );
};

useValidatableForm Hook Usage

import { useValidatableForm } from 'react-validatable-form';

const initialFormData = {};
const rules = [{ path: 'val', ruleSet: [{ rule: 'required' }] }];

const MyComponent = () => {
    const { isValid, formData, setPathValue, setFormIsSubmitted, setPathIsBlurred, getValue, getError } =
        useValidatableForm({
            rules,
            initialFormData,
        });

    return (
        <>
            <input
                type="text"
                value={getValue('val') || ''}
                onChange={(e) => setPathValue('val', e.target.value)}
                onBlur={() => setPathIsBlurred('val')}
                id="val"
            />
            <div className="errorText">{getError('val') || ' '}</div>
            <div>
                <button onClick={() => setFormIsSubmitted()}>Submit Form</button>
            </div>
        </>
    );
};

Examples

Checkout live examples on react-validatable-form-demo page for various customizations.

Live Examples on StackBlitz

Contributing

Please review the contributing guide before contributing to the repository.

License

MIT


About

React validatable form hook that is used to create dynamic client side validations on react forms

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •