simple-react-form-validation-helper

—- How to use it? —-

  • clone this repository to your react app

  • Import validator in your component

  • Use the validation functions in your component on onChange and onBlur events of your input fields

  • Feel free to modify the validation functions to your needs

  • example:
    validating an email field:

          // import validator
          import validator from '../Simple React Form Validation/validationHelpers'
    
          // use states to store the input value and error message
          const [email, setEmail] = useState('')
          const [emailError, setEmailError] = useState('')
    
          // inside your form
          <label>Email address</label>
          <input
              type='email'
              value={email}
    
              onChange={(e) => {
              setEmail(e.target.value)
              validator.emailInputChangeHandler(e.target.value, setEmailError)
              }}
    
              onBlur={(e) => {
              validator.emailInputBlurHandler(e.target.value, setEmailError)
              }}
          />
    
          // Your error message goes here
          <span className='text-danger fs-6'>
              {emailError}
          </span>
    

—- Found a bug? —-

Feel free to open an issue on github.

—- Want to contribute? —-

Great! fork this repository and make a pull request?.

GitHub

View Github