React Class Validator

React hook for validating forms with class-validator
Alternatives To React Class Validator
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Hook Form35,1241271,3377 hours ago951September 23, 202214mitTypeScript
📋 React Hooks for form state management and validation (Web + React Native)
Formik32,3962,4551,8076 hours ago201June 02, 2021769apache-2.0TypeScript
Build forms in React, without the tears 😭
React Jsonschema Form12,70056628115 hours ago103December 16, 2019291apache-2.0TypeScript
A React component for building Web forms from JSON Schema.
Redux Form12,61111,7811,2432 months ago235November 17, 2021491mitJavaScript
A Higher Order Component using react-redux to keep form state in a Redux store
Formily9,6281193 days ago209September 20, 202212mitTypeScript
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
React Final Form7,25750038412 days ago76April 01, 2022390mitJavaScript
🏁 High performance subscription-based form state management for React
X Render6,07013112 hours ago310September 21, 202213TypeScript
🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Unform4,514332 months ago16February 19, 202173mitTypeScript
Performance-focused API for React forms 🚀
Survey Library3,61537158 hours ago384September 20, 2022490mitTypeScript
Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
2 days ago29mitTypeScript
🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Svelte Form and Vue Form.
Alternatives To React Class Validator
Select To Compare

Alternative Project Comparisons


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

Build Status codecov


npm install --save react-class-validator

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

    <ValidatorProvider options={validatorOptions}>
        <MyComponent />
), document.getElementById('root'))

Default onErrorMessage behavior

The default behavior is to flatten all error constraints for each attribute.

const getDefaultContextOptions = (): ValidatorContextOptions => ({
    onErrorMessage: (error) => Object.keys(error.constraints).map((key) => error.constraints[key])


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.

class Person {

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


Create a class using validation decorators from class-validator.

import { IsNotEmpty } from "class-validator";

class LoginValidation {

        message: 'username cannot be empty'
    public username: string;

        message: 'password cannot be empty'
    public password: string;


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

const MyComponent = () => {

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

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

    return (
        <form onSubmit={async (evt) => {


            // `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 */}
            <input value={username} onChange={({target: {value}}) => setUsername(value)}
                onBlur={() => validate({username}, ['username'])}/>

            {/* show error */}
            {errors.username && (
                <div className="error">
                    { => <strong>message</strong>)}



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.

Formik error messages

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).

const options: ValidatorContextOptions = {
    resultType: 'map'

Then you can simply integrate with the default Formik flow.

export const Login: FunctionComponent = () => {

    const [validate] = useValidation(LoginValidation);

    return (
        <Formik initialValues={{username: '', password: ''}}
            {({values, touched, errors, handleChange, handleBlur}) => (
                    <label htmlFor="username">Username</label>
                    <Field id="username" name="username" placeholder="Username" />

                    {errors.username && touched.username ? (
                    ) : null}
                    {/* other fields */}
                    <button type="submit">


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.


Popular Form Projects
Popular Reactjs Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.