Simple validator for forms designed with material-ui v1/v3/v4/v5 components.
npm install react-material-ui-form-validator


`````
npm install react-material-ui-form-validator
Implementation of react-form-validator-core for material-ui
#### 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:
``javascript
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:
``javascript
import React from 'react';
import { ValidatorComponent } from 'react-material-ui-form-validator';
class SomeValidator extends ValidatorComponent {
renderValidatorComponent() {
// return your validated component
}
}
export default SomeValidator;
``$3
Supported types:
+ Text (TextValidator)
+ Select (SelectValidator)
Some rules can accept extra parameter, example:
``javascript``
validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}
/>

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.
``javascript
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 (
onSubmit={this.handleSubmit}
onError={errors => console.log(errors)}
>
onChange={this.handleChange}
name="email"
value={email}
validators={['required', 'isEmail']}
errorMessages={['this field is required', 'email is not valid']}
/>
);
}
}
``
You can add your custom rules:
``javascript
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 (
>
onChange={this.handleChange}
name="password"
type="password"
validators={['required']}
errorMessages={['this field is required']}
value={user.password}
/>
onChange={this.handleChange}
name="repeatPassword"
type="password"
validators={['isPasswordMatch', 'required']}
errorMessages={['password mismatch', 'this field is required']}
value={user.repeatPassword}
/>
);
}
``
Currently material-ui doesn't support error messages for switches, but you can easily add your own:
``javascript
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 (
errorText() {
const { isValid } = this.state;
if (isValid) {
return null;
}
return (
export default CheckboxValidatorElement;
````javascript```
componentDidMount() {
ValidatorForm.addValidationRule('isTruthy', value => value);
}
...
validators=['isTruthy']
errorMessages=['this field is required']
checked={value}
value={value} // <---- you must provide this prop, it will be used only for validation
/>
##### Advanced usage
This component covers all my needs, but feel free to contribute.