React-Client-Validation
Installation
npm i react-client-validationWorking example
Quick start
import handleValidation from 'react-client-validation'
const loginValidation = [
{
index: 'username',
condition: [!username],
errorMessage: 'User name is not valid!',
},
{
index: 'password',
//change errorObject's format
errorFormat: ['invalidPassword'],
customCondition: (data, errorReturnArray) => {
if (data.password) {
errorReturnArray.push(false)
}
},
},
]
const [isPass, loginErrorObject] = handleValidation({
errorArray: loginValidation,
defaultErrorMessage: "input can't be blank",
})console.log(isPass); // boolean, true or false
console.log(loginErrorObject);
{
username: {msg: 'User name is not valid!'},
password: [ invalidPassword: {msg: "input can't be blank"}]
//password's value is formatted based on errorFormat from the errorArray
}Basic Props
-
defaultMessage: string: if errorMessage is not found for the index, then defaultMessage will be applied to its return error message.
-
dataSource: any (is isRequired if using customCondition)
-
errorArray: Array (isRequired)
- condition: (string | number | boolean | undefined | null)[] (pick one between condition or customCondition)
- customCondition: Function (pick one between condition or customCondition): (dataSource, returnArray) => [true, false....]
- index: string (isRequired): will be the key for the return error Object.
- errorMessage: string: will be the value for the return error message.
- errorFormat: Array (only allowed when using customCondition) set custom format.
Example
errorFormat
//errorFormat example
//only allowed when using customCondition
1. without errorFormat
{ ...,
customCondition: ...,
}
//returned error object
{
username: {msg:'User name is not valid!'}
}
2. with errorFormat
//scenario 1
{
...,
errorFormat: ['test'],
customCondition: ...,
}
//returned error object
{
username: {test: {msg:'User name is not valid!'} }
}
//scenario 2
// 'index' will return the current index.
{
...,
errorFormat: ['test', 'index'],
customCondition: ...,
}
//returned error object
{
username: {test: { 0: { msg: 'User name is not valid!'} } }
}customCondition
//customCondition example
/**
when using customCondition,
push boolean to the errorReturnArray from customCondition
push true if the current condition passed, otherwise push false
**/
{...,
customCondition: (data, errorReturnArray) => {
if (!data.password) {
errorReturnArray.push(false)
// validation failed, will get fail message from the return error object
}
}
}Contract Me
Email 0529bill@gmail.com
License
Released under MIT License.