hooks-form-validation v1.0.2

hooks-form-validation

Form Validation With hooks made easy

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development . You want to write simple and maintainable form validations. As part of this goal, you want your validations to be simple yet accomadate your specifc needs. Be it in React Web or React Native.

Prerequisites

Basic Understanding of Hooks

Install

npm install --save hooks-form-validation

Usage

import React, {useState } from 'react'

import {validateName,
  validateEmail,
  validatePassword,
  validateConfirmPassword} from 'hooks-form-validation'

Arguments

validateName

This takes 4 argument State => which will hold the value of the input field fieldName => This is the name of the field e.g ' First Name , Last Name' setNameError => Funcction to update the error message min=> This is the minimum number of characters the name should have max => This is the maximum number of characters the name should have

validateName(Name, "fieldName" SetNameError , Min , Max)

validateEmail

This takes two argument State => This hold the value of the email input field setEmailError => function to update the error message of the email

    validateEmail(email, setEmailError)

validatePassword

This takes two argument State => Holds the value of the password field SetPasswordError Function to update the error message of the password min => (Optional=8) minimum characters of a password max => (optional =32) maximum characters of a password

validatePassword(password, setPasswordError)
or 
validatePassword(password , setPasswordError , 10,40)
// minimum password should be 10 and maximum should be 40

validateConfirmPassword

This takes three argument firstPassword => hold the value of the first password SecondPassword => holds the value of the password to be confirm setConfirmPasswordError => function to update the error message of the confirm password

```
validateConfirmPassword(password , confirmPassword , setConfirmPasswordError)
```

Set Up State

Since the value of your input field will be pointing to your state\ State Errors will hold the errors of each field when validated

const [email, setEmail] = useState()
  const [password, setPassword] = useState()
  const [confirmPassword, setConfirmPassword] = useState()
  const [Name, setName] = useState()

  // State Errors

  const [emailError, setEmailError] = useState()
  const [passwordError, setPasswordError] = useState()
  const [nameError, setNameError] = useState()
  const [confirmpasswordError, setConfirmpasswordError] = useState()

Setting Up Form

<form method='POST' onSubmit={submit} noValidate>
      <div>
        <label htmlFor='name'>Name</label>
        <input
          type='text'
          name='Name'
          id=''
          value={Name}
          onChange={(e) => setName(e.target.value)}
        />
      
      </div>
      <div>
        <label htmlFor='password'>password</label>
        <input
          type='password'
          name='password'
          id=''
          value={password}
          onChange={(e) => {
            setPassword(e.target.value)
          }}
        />
     
      </div>
      <div>
        <label htmlFor='password'> Confirm password</label>
        <input
          type='password'
          name='password'
          id=''
          value={confirmPassword}
          onChange={(e) => {
            setConfirmPassword(e.target.value)
          }}
        />
      
      </div>

      <div>
        <label htmlFor='email'>Email</label>
        <input
          type='text'
          name='email'
          id=''
          value={email}
          onChange={(e) => setName(setEmail(e.target.value))}
        />
       
      </div>

      <div>
        <button type='submit'>Submit</button>
      </div>
    </form>

Conditionally showing of Errors

We created a state the store the error messages of each field. We show this error only if the state is not null || undefine || ""

<form method='POST' onSubmit={submit} noValidate>
      <div>
        <label htmlFor='name'>Name</label>
        <input
          type='text'
          name='Name'
          id=''
          value={Name}
          onChange={(e) => setName(e.target.value)}
        />
        {nameError ? <span className='errorMessage'>{nameError}</span> : null}
      </div>
      <div>
        <label htmlFor='password'>password</label>
        <input
          type='password'
          name='password'
          id=''
          value={password}
          onChange={(e) => {
            setPassword(e.target.value)
          }}
        />
        {passwordError ? (
          <span className='errorMessage'>{passwordError}</span>
        ) : null}
      </div>
      <div>
        <label htmlFor='password'> Confirm password</label>
        <input
          type='password'
          name='password'
          id=''
          value={confirmPassword}
          onChange={(e) => {
            setConfirmPassword(e.target.value)
          }}
        />
        {confirmpasswordError ? (
          <span className='errorMessage'>{confirmpasswordError}</span>
        ) : null}
      </div>

      <div>
        <label htmlFor='email'>Email</label>
        <input
          type='text'
          name='email'
          id=''
          value={email}
          onChange={(e) => setName(setEmail(e.target.value))}
        />
        {emailError ? <span className='errorMessage'>{emailError}</span> : null}
      </div>

      <div>
        <button type='submit'>Submit</button>
      </div>
    </form>

Validating form onSubmit

const submit = (e) => {
    e.preventDefault()

    validateName(Name, 'Name', setNameError, 3, 10)
    validatePassword(password, setPasswordError)
    validateEmail(email, setEmailError)
    validateConfirmPassword(password, confirmPassword, setConfirmpasswordError)
  }

storing the value of the function

const submit = (e) => {
    e.preventDefault()

  let validName=  validateName(Name, 'Name', setNameError, 3, 10)
   let validPassword validatePassword(password, setPasswordError)
  let validEmail = validateEmail(email, setEmailError)
  let validConfirmPassword=  validateConfirmPassword(password, confirmPassword, setConfirmpasswordError)
  }
  
  if (validName && validPassword && validEmail && validConfirmPassword ) {
// send respond to a server 

}

License

MIT © labaran1