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 |