https://github.com/newoldmax/react-material-ui-form-validator
Simple validator for forms designed with material-ui components.
https://github.com/newoldmax/react-material-ui-form-validator
form-validation material-ui react
Last synced: 3 months ago
JSON representation
Simple validator for forms designed with material-ui components.
- Host: GitHub
- URL: https://github.com/newoldmax/react-material-ui-form-validator
- Owner: NewOldMax
- License: mit
- Created: 2017-02-23T11:17:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-05-29T09:00:57.000Z (8 months ago)
- Last Synced: 2025-10-06T06:57:13.624Z (3 months ago)
- Topics: form-validation, material-ui, react
- Language: JavaScript
- Homepage: https://newoldmax.github.io/react-material-ui-form-validator/
- Size: 7.35 MB
- Stars: 325
- Watchers: 6
- Forks: 80
- Open Issues: 7
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
## Validation component for material-ui forms
[](https://opensource.org/licenses/MIT)
[](https://badge.fury.io/js/react-material-ui-form-validator)
[](https://travis-ci.org/NewOldMax/react-material-ui-form-validator)
### [Demo](https://newoldmax.github.io/react-material-ui-form-validator/)
### 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](https://www.npmjs.com/package/react-form-validator-core) for [material-ui](https://mui.com/)
### 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:
````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;
````
### Info
Supported types:
+ Text ([TextValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TextValidator.jsx))
+ Select ([SelectValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/SelectValidator.jsx))
Some rules can accept extra parameter, example:
````javascript
````
### 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](http://www.material-ui.com/#/get-started/usage).
````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 (
console.log(errors)}
>
Submit
);
}
}
````
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 (
Submit
);
}
````
Currently material-ui [doesn't support](https://github.com/callemall/material-ui/issues/3771) 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 (
{ this.input = r; }}
/>
{this.errorText()}
);
}
errorText() {
const { isValid } = this.state;
if (isValid) {
return null;
}
return (
{this.getErrorMessage()}
);
}
}
export default CheckboxValidatorElement;
````
````javascript
componentDidMount() {
ValidatorForm.addValidationRule('isTruthy', value => value);
}
...
````
##### [Advanced usage](https://github.com/NewOldMax/react-material-ui-form-validator/wiki)
### Contributing
This component covers all my needs, but feel free to contribute.