react-form-helper-validator
⚡ Tiny library for form state/ validation written entirely with React Hooks
Installation
npm install react-form-helper-validator --save
Or
yarn add react-form-helper-validator
Usage
First off let's import FormHelper
import FormHelper from "react-form-helper-validator";
and then wrap your form with FormHelper like so while providing required props
const model = { email: "", }; const rules = { email: [ v => !v && "This field is required", v => validationRules.emailValidation(v, "email") ] }; <FormValidator model={model} rules={rules}> {({ validate, formData, formState, formErrors, update, resetForm, hasErrors, validateField, clearValidation }) => { const handleSubmit = e => { e.preventDefault(); validate() .then(() => { console.log("submitting", formData); }) .catch(err => { console.error("err", err); }); }; return ( <form onSubmit={handleSubmit}> <div className="field"> <label className="label"> Email </label> <div className="control"> <input name="email" value={formData.email} onChange={update.text} className="input" type="email" placeholder="Enter your email" /> </div> <p className={`help ${!formErrors["email"] && "is-success"} ${formErrors["email"] && "is-danger"}`} > {formErrors["email"]} </p> </div> <button onClick={handleSubmit} type="submit" className="button" > Submit </button> </form> ) }</FormValidator>
Props
Prop | Required | Type | Purpose |
---|---|---|---|
model | true | Object | Provides initial form data |
rules | false | Object | An object containing an array of rules which corresponds to data properties. Rules are functions that return an error string on error and false otherwise |
manual | false | Array | An array of field names which shall not be validated automatically on change |