Skip to content

YamenSharaf/react-form-helper-validator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

⚡ Tiny library for form state/ validation written entirely with React Hooks

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published