Use-form-input-validator NPM

🆗 use-form-input-validator

React hooks library to validate your form inputs with easily configurable checks and validators.

Install

npm install --save use-form-input-validator
# or
yarn add use-form-input-validator

Fork Demo on Codesandbox

What's New✨ You can now reference other values in the custom validator for scenerios like checking if confirm password field matchs password field

Usage

Simple Usage

import React from 'react'
import useFormValidator from 'use-form-input-validator'

const App = () => {
  const { values, errors, updateField, isAllFieldsValid } = useFormValidator({
    email: {
      value: '', // defuallt changes
      checks: 'required|email' // checks to run on the field on change
    }
  })

  const handleSubmit = (e) => {
    // verify if all fields are valid before submitting
    if (isAllFieldsValid()) {
      // get values easily
      const { email } = values
      console.log(email)
    }
  }
  return (
    <div>
      <label htmlFor='email'>Email: </label>
      <input name='email' onChange={updateField} />
      <br />
      <small style={{ color: 'red' }}>{errors.email}</small>
      <br />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  )
}

export default App

Using Checks

Check allow you to perform common validation easily by specifying a string of list validation rules.

For example to make an username field required and have a minimium of 5 characters and a maximium of 10 character, you'll have the following required|min:5|max:10

  ...
  useFormValidator({
    username: {
      value: '',
      checks: 'required|min:5|max:10', // checks to run on the field on input change
    }
  })
  ...

Using a custom validator with checks

You can add a custom validator in addition to checks to create more complex validation rules by using the validate as follows.

  ...
  const { values, errors, updateField, isAllFieldsValid } = useFormValidator({
    username: {
      value: '',
      checks: 'required|min:5|max:10', // checks to run on the field on change
      // Custom validator
      validate: (value) => {
        if (value.includes('kepler')) {
          return 'The word "kepler" cannot be included in your username'
        }
      }
    }
  })
  ...

Access other fields value

You can now access other fields values in the custom validator. This is useful in certain scenarios. For example, when you want to check if confirm password field matches the password field.

  ...

  const { values, errors, updateField, isAllFieldsValid } = useFormValidator({
    password: {
      value: '',
      checks: 'required|min:8', // checks to run on the field on change
    },
    confirmPassword: {
      value: '',
      checks: 'required|min:8', // checks to run on the field on change
      // Custom validator
      validate: (value, values) => {
          if(value !== values.comfirmPassword){
            return "Confirm Password doesn't match passward"
          }
      }
    }
  })

  ...

Check if a field is valid

You can check if a certain field value is valid

import React from 'react'
import useFormValidator from 'use-form-input-validator'

const App = () => {
  const { values, errors, updateField, isFieldValid } = useFormValidator({
    email: {
      value: '', // defuallt changes
      checks: 'required|email' // checks to run on the field on change
    }
  })

  const handleSubmit = (e) => {
    // verify if email field is valid before submitting
    if (isFieldValid('email')) console.log(email)
  }
  return (
    <div>
      <label htmlFor='email'>Email: </label>
      <input name='email' onChange={updateField} />
      <br />
      <small style={{ color: 'red' }}>{errors.email}</small>
      <br />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  )
}

export default App

Available Checks

alpha
The field under validation must be entirely alphabetic characters.
alpha_num
The field under validation must be entirely alpha-numeric characters.
date
The field under validation must be a valid date.
email
The field under validation must be a valid email address.
match:regex
he field under validation must match the given regular expression.
min:limit
The field under validation must have a minimium of limit number of character.
max:limit
The field under validation must have a maximium of limit number of character.
num
The field under validation must be a number
tel
The field under validation must be a mobile phone number