react-class-validator

Easy-to-use React hook for validating forms with the class-validator library.


Installation

``bash
npm install --save react-class-validator
`

`typescript jsx

const validatorOptions: ValidatorContextOptions = {
onErrorMessage: (error): string => {
// custom error message handling (localization, etc)
},
resultType: 'boolean' // default, can also be set to 'map'
}

render((



), document.getElementById('root'))
`

Default onErrorMessage behavior


The default behavior is to flatten all error constraints for each attribute.
`typescript
const getDefaultContextOptions = (): ValidatorContextOptions => ({
onErrorMessage: (error) => Object.keys(error.constraints).map((key) => error.constraints[key])
});
`

$3

When using libraries such as react-intl, you don't have to modify the existing
onErrorMessage handler. Decorators are handled at source load, so you only need to include the intl.formatMessage in your message definition.

`typescript
class Person {

@IsEmail({}, {
message: intl.formatMessage(defineMessage({defaultMessage: 'Invalid email'}))
})
@IsNotEmpty({
message: intl.formatMessage(defineMessage({defaultMessage: 'Email cannot be empty'}))
})
public email: string;

}

`

Usage

Create a class using validation decorators from class-validator.

`typescript
import { IsNotEmpty } from "class-validator";

class LoginValidation {

@IsNotEmpty({
message: 'username cannot be empty'
})
public username: string;

@IsNotEmpty({
message: 'password cannot be empty'
})
public password: string;

}
`

Set up your form component to validate using your validation class.

`typescript jsx
const MyComponent = () => {

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const [validate, errors] = useValidation(LoginValidation);

return (


{

evt.preventDefault();

// validate will return true if the submission is valid
if (await validate({username, password})) {
// ... handle valid submission
}

}}>

{/ use a filter so that the onBlur function will only validate username /}
setUsername(value)}
onBlur={() => validate({username}, ['username'])}/>

{/ show error /}
{errors.username && (



{errors.username.map((message) => message)}


)}

);

};
`

Usage With Formik

react-class-validator easily integrates with Formik. You can simply use the validate
function returned from useValidation, so long as the Formik fields are named the same as the keys in your validation
class. Individual fields will have to be validated with onBlur functionality.

$3

To display error messages without custom handling, messages will need to be outputted as a map upon validation.
Do this by overriding the default resultType (you can also do this at the component-level).

`typescript
const options: ValidatorContextOptions = {
resultType: 'map'
};
`

Then you can simply integrate with the default Formik flow.

`typescript jsx
export const Login: FunctionComponent = () => {

const [validate] = useValidation(LoginValidation);

return (
validateOnBlur
validateOnChange
validate={validate}>
{({values, touched, errors, handleChange, handleBlur}) => (


Username

{errors.username && touched.username ? (

{errors.username}

) : null}

{/ other fields /}


Submit



)}

);
};

``

Contributors

Library built and maintained by Robin Schultz

If you would like to contribute (aka buy me a beer), you can send funds via PayPal at the link below.