React hook for using state with validation. Uses validate.js
const [state, setState, isValid, validationMessage, validate] =
useValidatedState(initialState, getValidationMessage, validateImmediately]);
Returns a stateful value, a function to update it, whether it's valid, and validation message (if invalid).
initialState
The initial state value. During the initial render, the returned state is the same as this value.
getValidationMessage
Optional. Function that receives the current state value, and returns a validation string if invalid, otherwise should return undefined
;
Default value:
() => undefined
validateImmediately
Optional. Boolean value whether to validate on initial render, otherwise will validate after first change.
Default value:
false
state
The current state value.
setState
Function used to update the state. It accepts a new state value and enqueues a re-render of the component.
isValid
A boolean value indicating if the state passes the validationConstraints.
Returns undefined if validation has not been been run.
validationMessage
Optional. A string describing the validation failures, if any.
validate
Optional. Function used to trigger validation, even if state is unchanged.
Useful for validating an unchanged value on blur.
const [username, setUsername, usernameValid, usernameValidationMessage, validateUsername] =
useValidatedState('', { presence: true, email: true });
const [pwd, setPwd, pwdValid, validatePwd] =
useValidatedState(password, { presence: true, length: { minimum: 6 } });
return (
<form>
<div>
<label>Username</label>
<input
value={username}
onChange={e => setUsername(e.target.value)}
onBlur={() => validateUsername()}
/>
<div>{usernameMessage}</div>
</div>
<div>
<label>Password</label>
<input
type="password"
value={pwd}
onChange={e => setPwd(e.target.value)}
onBlur={() => validatePwd()}
/>
<div>{pwdMessage}</div>
</div>
<input type="submit" disabled={usernameValid && pwdValid} value="Sign Up" />
</form>
);