⚡ Tiny library for form state/ validation written entirely with React Hooks
npm install react-form-helper-validator --save
Or
yarn add react-form-helper-validator
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>
| 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 |