react-class-validator
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    react-class-validator

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

    Build Status codecov

    Installation

    npm install --save react-class-validator
    const validatorOptions: ValidatorContextOptions = {
        onErrorMessage: (error): string => {
            // custom error message handling (localization, etc)
        }
    }
    
    render((
        <ValidatorProvider options={validatorOptions}>
            <MyComponent />
        </ValidatorProvider>
    ), 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])
    });

    Usage

    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;
    
    }
    const MyComponent = () => {
    
        const [username, setUsername] = useState('');
        const [password, setPassword] = useState('');
    
        const {validate, errors} = useValidation(LoginValidation);
    
        return (
            <form onSubmit={async (evt) => {
    
                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 */}
                <input value={username} onChange={({target: {value}}) => setUsername(value)}
                    onBlur={() => validate({username}, ['username'])}/>
    
                {/* show error */}
                {errors.username && (
                    <div className="error">
                        {errors.username.map((message) => <strong>message</strong>)}
                    </div>
                )}
    
            </form>
        );
    
    };

    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.

    paypal

    Install

    npm i react-class-validator

    DownloadsWeekly Downloads

    38

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    16.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar