Reactidate

React form validator.

Installation

To install, run:

npm install reactidate --save

Usage

Using reactidate in react applications is super following the code sample below

    import { useRef, useState } from "react";
    import {useValidate, Required, Email, minLength}  from "reactidate";

    function App(){
        const $validate = useValidate({multiple: true})
  
        const rules = { 
            email: {Required, Email},
            password: {Required, minLength: minLength(6)},
        }

        const formdata = useRef({email: "", password: ""});

        const [formRules, setFormRules] = useState(rules);

        const Submit = (ev: any) =>{
            ev.preventDefault()
            let valid = $validate(setFormRules, formRules, formdata.current);
            if(!valid){
                return;
            }
            // other process and api request code
        }

    }

Note: that the code sample above implements the useRef Hook to store the state of the form data. useState can also be used.

The template will look like the code below

    <div >
        <input onChange={(e) => formdata.current.email = e.currentTarget.value} type="email" className={formRules.email?.$error ? 'red': ''}  />
        { !!formRules.email?.$error  && <span>{formRules.email?.$message}</span> }
    </div>

useValidate hook and the $validate function call are the two important aspect of the code above.

useValidate takes an options with the following params

| Params | type | description | |--------|:----:|--------:| | multiple | boolean (default: true) | Specifies if validator should stop on error seen for a single form element | | | | |

License

The MIT License (MIT). Please see License File for more information.