React hooks library to validate your form inputs with easily configurable checks and validators.
npm install --save use-form-input-validator
# or
yarn add use-form-input-validatorWhat's New✨ You can now reference other values in the custom validator for scenerios like checking if
confirm passwordfield matchs passwordfield
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
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 } }) ...
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' } } } }) ...
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" } } } }) ...
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
-
alphaThe field under validation must be entirely alphabetic characters.
-
alpha_numThe field under validation must be entirely alpha-numeric characters.
-
dateThe field under validation must be a valid date.
-
emailThe field under validation must be a valid email address.
-
match:regexhe field under validation must match the given regular expression.
-
min:limitThe field under validation must have a minimium of
limitnumber of character. -
max:limitThe field under validation must have a maximium of
limitnumber of character. -
numThe field under validation must be a number
-
telThe field under validation must be a mobile phone number
MIT © Marvinified