react-form-helper-validator

1.0.10 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i react-form-helper-validator

Weekly Downloads

1

Version

1.0.10

License

MIT

Unpacked Size

21.4 kB

Total Files

11

Last publish

Collaborators

  • yamensharaf