hook-form-validator

A fast and lightweight,free and open-source validation library for ReactJS that addresses three primary form creation pain points: State manipulation. Form Validation (error message) Form Submission.

This library consists wrapper React components over hook-form-validator library.

Show

Demo page

Installation

npm i hook-form-validator

npm i deepmerge

Usage

JSX

import React, { Component } from 'react';
import * as Yup from "yup";
import useValidator  from 'hook-form-validator';

export default function App() {

  const onSubmit = () => {
   // here you will get the validated data
   console.log(values)
  }

  const {
    values,
    setValues,
    touched,
    errors,
    handleSubmit,
    getFieldProps,
  } = useValidator({
    initialValues: {
      username: "",
      email: "",
    },
    validationSchema: Yup.object({
      username: Yup.string().required("User Name is Required."),
      email: Yup.string().email().required("Email is Required."),
    }),
    onSubmit,
  });


  return (
    <>
        <form onSubmit={handleSubmit}>
          <div>
             <input type="text" name="username" {...getFieldProps("username")} />
             {(touched?.username && errors?.username) && <div>{errors?.username}</div>}
          </div>

          <div>
             <input type="text" name="email" {...getFieldProps("email")} />
             {(touched?.email && errors?.email) && <div>{errors?.email}</div>}
          </div>
  
          <button type="submit">
            Save
          </button>
        </form>
    </>
  );
}

API

Container

Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component

Function

| Property | Type | Default | Description | |-|:-:|:-:|-| |values|object|{}| Get updated values |errors|object|{} | Get all the errors |touched|object|{}| It helps to display error based on blur event |setValues|function|undefined| Update the values |getFieldProps|function|undefined| You can directly pass this function for handle the value |setErrors|function|undefined| It helps to update errors manually. |handleChange|function|undefined| It trigger the manually onChange function with help of createFakeEvent |handleBlur|function| undefined | It trigger the manually onBlur function with help of createFakeEvent |handleSubmit|function|undefined| You have pass this function in form tag |createFakeEvent|function|undefined| It will helps to trigger fake event

handleSubmit

You have pass this function in form tag with the help of this function it trigger when submit button is clicked & check for errors & trigger the onSubmit function which is provided by our hook

You can see the example to use handleSubmit

Parameters

• handleSubmit : handleSubmit

setValues

This function use to update the initialValues

setValue({...values,[key]:[value]})

const App = () => {
  const {
     setValues,
     handleSubmit,
     getFieldProps,
  } = useValidator({
    initialValues: {
      firstName: "",
    },
    validationSchema: Yup.object({
      firstName: Yup.string().required("User Name is Required."),
    }),
    onSubmit,
  });
    return (
    <form>
      <input {...getFieldProps("firstName")} />
      <button type="button" onClick={() => setValue("firstName", "Bill")}>
        setValue
      </button>
    </form>
  );
};

Parameters

• payload : object

getFieldProps

You can directly pass this function for handle the value

<input {...getFieldProps('firstName')} />

Parameters

• onChange : ChangeHandler onChange prop to subscribe the input change event.
• onBlur : ChangeHandler onBlur prop to subscribe the input blur event.
• ref : React.Ref<any> Input reference for hook form to register.
• name : string Input's name being registered.

setErrors

The function allows you to manually set one or more errors with your custom message.

setErrors({...errors,[key]:[message]})

Parameters

• errors : errors Set an error with its type and message.

handleChange

It trigger the manually onChange function with help of createFakeEvent.

<input 
  onChange={(e) => {
    handleChange("firstName")(createFakeEvent(e));
  }}
/>

Parameters

• handleChange : handleChange

handleBlur

It trigger the manually onBlur function with help of createFakeEvent.

<input 
  onChange={(e) => {
    handleBlur("firstName")(createFakeEvent(e));
  }}
/>

Parameters

• handleBlur : handleBlur