NewOldMax/react-form-validator-core

Validation component for react forms

Simple form validation component for react forms inspired by formsy-react

Default validation rules:

matchRegexp
isEmail
isEmpty
required
trim
isNumber
isFloat
isPositive
minNumber
maxNumber
minFloat
maxFloat
isString
minStringLength
maxStringLength
maxFileSize
allowedExtensions

Some rules can accept extra parameter, example:

<YourValidationInput
   {...someProps}
   validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}
/>

Usage

import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

class TextValidator extends ValidatorComponent {

    render() {
        const { errorMessages, validators, requiredError, validatorListener, ...rest } = this.props;

        return (
            <div>
                <input
                    {...rest}
                    ref={(r) => { this.input = r; }}
                />
                {this.errorText()}
            </div>
        );
    }

    errorText() {
        const { isValid } = this.state;

        if (isValid) {
            return null;
        }

        return (
            <div style={{ color: 'red' }}>
                {this.getErrorMessage()}
            </div>
        );
    }
}

export default TextValidator;

...
import { ValidatorForm } from 'react-form-validator-core';
...
render() {
    return (
        <ValidatorForm
            ref="form"
            onSubmit={this.handleSubmit}
        >
            <TextValidator
                onChange={this.handleChange}
                name="email"
                value={email}
                validators={['required', 'isEmail']}
                errorMessages={['this field is required', 'email is not valid']}
            />
            <button type="submit">submit</button>
        </ValidatorForm>
    );
}
...


class FileValidator extends ValidatorComponent {
  render() {
    const { errorMessages, validators, requiredError, validatorListener, value, ...rest } = this.props;
    return (
      <div>
        <input type="file" {...rest}>
        {this.errorText()}
      </div>
    );
  }

  errorText() {
    const { isValid } = this.state;

    if (isValid) {
      return null;
    }

    return <div style={{ color: "red" }}>{this.getErrorMessage()}</div>;
  }
}
export default FileValidator;

...
import { ValidatorForm } from 'react-form-validator-core';
...
render() {
    return (
        <ValidatorForm
            ref="form"
            onSubmit={this.handleSubmit}
        >
            <FileValidator
                onChange={this.handleChange}
                name="file"
                type="file"
                value={file}
                validators={['isFile', 'maxFileSize:' + 1 * 1024 * 1024, 'allowedExtensions:image/png,image/jpeg']}
                errorMessages={['File is not valid', 'Size must not exceed 1MB', 'Only png and jpeg']}
            />
            <button type="submit">submit</button>
        </ValidatorForm>
    );
}
...

You can add your own rules

ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
    if (value !== this.state.user.password) {
        return false;
    }
    return true;
});

Get them

ValidatorForm.getValidationRule('isPasswordMatch');

Remove them

ValidatorForm.removeValidationRule('isPasswordMatch');

And check is validation rule already in list

ValidatorForm.hasValidationRule('isPasswordMatch');

Migration guide

From 0.x to 1.x

Breaking changes was introduced in order to avoid legacy context. You should change render method of your input components to renderValidatorComponent.

Before:

import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

class TextValidator extends ValidatorComponent {
    render() {
        // return your validated component
    }
}

export default TextValidator;

After:

import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

class TextValidator extends ValidatorComponent {
    renderValidatorComponent() {
        // return your validated component
    }
}

export default TextValidator;

API

ValidatorForm

Props

Prop	Required	Type	Default value	Description
onSubmit	true	function		Callback for form that fires when all validations are passed
instantValidate	false	bool	true	If true, form will be validated after each field change. If false, form will be validated only after clicking submit button.
onError	false	function		Callback for form that fires when some of validations are not passed. It will return array of elements which not valid.
debounceTime	false	number	0	Debounce time for validation i.e. your validation will run after `debounceTime` ms when you stop changing your input

Instance methods (via ref)

Name	Params	Return	Description
resetValidations			Reset validation messages for all validated inputs
isFormValid	dryRun: bool (default true)	Promise	Get form validation state in a Promise (`true` if whole form is valid). Run with `dryRun = false` to show validation errors on form

Static methods (via class)

Name	Params	Return	Description
addValidationRule	name: string, callback: function		Add new validation rule
getValidationRule	name: string	function	Get validation rule by name
hasValidationRule	name: string	bool	Check if rule exsits
removeValidationRule	name: string		Remove validation rule

All validated fields (ValidatorComponent)

Props

Prop	Required	Type	Description
validators	false	array	Array of validators. See list of default validators above.
errorMessages	false	array	Array of error messages. Order of messages should be the same as `validators` prop.
name	true	string	Name of input
validatorListener	false	function	It triggers after each validation. It will return `true` or `false`
withRequiredValidator	false	bool	Allow to use `required` validator in any validation trigger, not only form submit
containerProps	false	object	Allow to customize input wrapper `div`

Methods

Name	Params	Return	Description
getErrorMessage			Get error validation message
validate	value: any, includeRequired: bool		Run validation for current component
isValid		bool	Return current validation state
makeInvalid			Set invalid validation state
makeValid			Set valid validation state

Implementations

material-ui

Contributing

This component covers all my needs, but feel free to contribute.

NewOldMax / react-form-validator-core

readme