react-material-ui-form-validator

Validation component for material-ui forms


$3

$3

```
npm install react-material-ui-form-validator
``

$3

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

$3

$3

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 (
ref="form"
onSubmit={this.handleSubmit}
onError={errors => console.log(errors)}
>
label="Email"
onChange={this.handleChange}
name="email"
value={email}
validators={['required', 'isEmail']}
errorMessages={['this field is required', 'email is not valid']}
/>
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 (
onSubmit={this.handleSubmit}
>
label="Password"
onChange={this.handleChange}
name="password"
type="password"
validators={['required']}
errorMessages={['this field is required']}
value={user.password}
/>
label="Repeat password"
onChange={this.handleChange}
name="repeatPassword"
type="password"
validators={['isPasswordMatch', 'required']}
errorMessages={['password mismatch', 'this field is required']}
value={user.repeatPassword}
/>
Submit

);
}

``

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 (


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

$3

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