<TextValidator {...someProps} validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']} />

import React from 'react'; import Button from '@material-ui/core/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 ( <ValidatorForm ref="form" onSubmit={this.handleSubmit} onError={errors => console.log(errors)} > <TextValidator label="Email" onChange={this.handleChange} name="email" value={email} validators={['required', 'isEmail']} errorMessages={['this field is required', 'email is not valid']} /> <Button type="submit">Submit</Button> </ValidatorForm> ); } }

import React from 'react'; import Button from '@material-ui/core/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 ( <ValidatorForm onSubmit={this.handleSubmit} > <TextValidator label="Password" onChange={this.handleChange} name="password" type="password" validators={['required']} errorMessages={['this field is required']} value={user.password} /> <TextValidator label="Repeat password" onChange={this.handleChange} name="repeatPassword" type="password" validators={['isPasswordMatch', 'required']} errorMessages={['password mismatch', 'this field is required']} value={user.repeatPassword} /> <Button type="submit">Submit</Button> </ValidatorForm> ); }

import React from 'react'; import red from '@material-ui/core/colors/red'; import Checkbox from '@material-ui/core/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 { render() { const { errorMessages, validators, requiredError, value, ...rest } = this.props; return ( <div> <Checkbox {...rest} ref={(r) => { this.input = r; }} /> {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); } ... <CheckboxValidatorElement ... validators=['isTruthy'] errorMessages=['this field is required'] checked={value} value={value} // <---- you must provide this prop, it will be used only for validation />