react-material-ui-form-validator

To help you get started, we've collected the most common ways that react-material-ui-form-validator is being used within popular public projects.

NewOldMax / react-material-ui-form-validator / src / components / examples / CustomRulesFormExample.js View on Github

componentDidMount() {
        // custom rule will have name 'isPasswordMatch'
        ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
            const { formData } = this.state;
            if (value !== formData.password) {
                return false;
            }
            return true;
        });
    }

View more ways to use react-material-ui-form-validator

Validation component for material-ui forms

Demo

Installation

npm install react-material-ui-form-validator

Versions

• 0.x, 1.x - supports material-ui <= 0.x
• ^2.0.0 - supports material-ui >= 1.x || 3.x || 4.x
• ^3.0.0 - supports material-ui >= 5.x

Implementation of react-form-validator-core for material-ui

Migration guide

From <2.1.1 to >=2.1.1

Breaking changes was introduced to react-form-validator-core in order to avoid legacy context. If you have custom validator components then you should change render method of your input components to renderValidatorComponent.

Before:

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

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

export default SomeValidator;

After:

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

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

export default SomeValidator;

Info

Supported types:

• Text (TextValidator)
• Select (SelectValidator)

Some rules can accept extra parameter, example:

Example

Usage

You can pass any props of field components, but note that errorText prop will be replaced when validation errors occurred. Your component must provide a theme.

import React from 'react';
import Button from '@mui/material/Button';
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';

class MyForm extends React.Component {

    state = {
        email: '',
    }

    handleChange = (event) => {
        const email = event.target.value;
        this.setState({ email });
    }

    handleSubmit = () => {
        // your submit logic
    }

    render() {
        const { email } = this.state;
        return (
             console.log(errors)}
            >
                
                <button type="submit">Submit</button>
            
        );
    }
}

You can add your custom rules:

import React from 'react';
import Button from '@mui/material/Button';
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';

class ResetPasswordForm extends React.Component {

    state = {
        user: {
            password: '',
            repeatPassword: '',
        },
    };

    componentDidMount() {
        // custom rule will have name 'isPasswordMatch'
        ValidatorForm.addValidationRule('isPasswordMatch', (value) => {
            if (value !== this.state.user.password) {
                return false;
            }
            return true;
        });
    }

    componentWillUnmount() {
        // remove rule when it is not needed
        ValidatorForm.removeValidationRule('isPasswordMatch');
    }

    handleChange = (event) => {
        const { user } = this.state;
        user[event.target.name] = event.target.value;
        this.setState({ user });
    }

    handleSubmit = () => {
        // your submit logic
    }

    render() {
        const { user } = this.state;

        return (
            
                
                
                <button type="submit">Submit</button>
            
        );
    }

Currently material-ui doesn't support error messages for switches, but you can easily add your own:

import React from 'react';
import red from '@mui/material/colors/red';
import Checkbox from '@mui/material/Checkbox';
import { ValidatorComponent } from 'react-material-ui-form-validator';

const red300 = red['500'];

const style = {
    right: 0,
    fontSize: '12px',
    color: red300,
    position: 'absolute',
    marginTop: '-25px',
};

class CheckboxValidatorElement extends ValidatorComponent {

    renderValidatorComponent() {
        const { errorMessages, validators, requiredError, value, ...rest } = this.props;

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

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

        if (isValid) {
            return null;
        }

        return (
            <div style="{style}">
                {this.getErrorMessage()}
            </div>
        );
    }
}

export default CheckboxValidatorElement;

    componentDidMount() {
        ValidatorForm.addValidationRule('isTruthy', value => value);
    }
...
    

Advanced usage

Contributing

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