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:
```javascript
{...someProps}
validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}
/>
``

$3

``javascript
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 (


export default TextValidator;
``

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

);
}
...
``

``javascript

class FileValidator extends ValidatorComponent {
render() {
const { errorMessages, validators, requiredError, validatorListener, value, ...rest } = this.props;
return (


...
import { ValidatorForm } from 'react-form-validator-core';
...
render() {
return (
ref="form"
onSubmit={this.handleSubmit}
>
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']}
/>
submit

);
}
...
``

#### You can add your own rules
``javascript
ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
if (value !== this.state.user.password) {
return false;
}
return true;
});
``
Get them
``javascript
ValidatorForm.getValidationRule('isPasswordMatch');
``
Remove them
``javascript
ValidatorForm.removeValidationRule('isPasswordMatch');
``
And check is validation rule already in list
``javascript
ValidatorForm.hasValidationRule('isPasswordMatch');
``

$3

#### 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:
``javascript
import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

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

export default TextValidator;
``

After:
``javascript
import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

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

export default TextValidator;
``

$3

#### 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 | Default value | 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 |

$3

+ material-ui

$3

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