To install, run:
npm install reactidate --saveUsing 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 |
The MIT License (MIT). Please see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent