Validation component for material-ui forms
Simple form validation component for material-ui library inspired by formsy-react
Supported types:
- Text (TextValidator)
- Select (SelectValidator)
- AutoComplete (AutoCompleteValidator)
- Date (DateValidator)
- Time (TimeValidator)
Default validation rules:
- matchRegexp
- isEmail
- isEmpty
- required
- trim
- isNumber
- isFloat
- isPositive
- minNumber
- maxNumber
Some rules can accept extra parameter, example:
<TextValidator ...someProps validators='minNumber:0' 'maxNumber:255' 'matchRegexp:^[0-9]$'/>
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.
;;; Component { superprops; thishandleChange = thishandleChange; } { const email = eventtargetvalue; this; } { // your submit logic } { const email = thisstate; return <ValidatorForm ref="form" onSubmit=thishandleSubmit onError= console > <TextValidator floatingLabelText="Email" onChange=thishandleChange name="email" value=email validators='required' 'isEmail' errorMessages='this field is required' 'email is not valid' /> <RaisedButton type="submit" /> </ValidatorForm> ; }
You can add your custom rules:
;;; Component { superprops; thisstate = user: {} ; thishandleChange = thishandleChange; } { // custom rule will have name 'isPasswordMatch' ValidatorForm; } { const user = thisstate; usereventtargetname = eventtargetvalue; this; } { // your submit logic } { const user = thisstate; return <ValidatorForm onSubmit=thishandleSubmit > <TextValidator floatingLabelText="Password" onChange=thishandleChange name="password" type="password" validators='required' errorMessages='this field is required' value=userpassword /> <TextValidator floatingLabelText="Repeat password" onChange=thishandleChange name="repeatPassword" type="password" validators='isPasswordMatch' 'required' errorMessages='password mismatch' 'this field is required' value=userrepeatPassword /> <RaisedButton type="submit" /> </ValidatorForm> ; }
Currently material-ui doesn't support error messages for switches, but you can easily add your own:
;;;; { const errorMessages validators requiredError value ...rest = thisprops; return <div> <Checkbox ...rest ref= { thisinput = r; } /> this </div> ; } { const isValid = thisstate; if isValid return null; const style = right: 0 fontSize: '12px' color: red300 position: 'absolute' marginTop: '-25px' ; return <div style=style> this </div> ; } ;
{ ValidatorForm; }... <CheckboxValidatorElement ... 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
API
ValidatorForm
Prop | Required | Type | Default value | Description |
---|---|---|---|---|
onSubmit | true | function | Callback for form that fires when all validations are passed | |
instantValidate | false | bool | true | If true, form will be validated after each field change. If false, form will be validated only after clicking submit button. |
onError | false | function | Callback for form that fires when some of validations are not passed. It will return array of elements which not valid. |
All validated fields (ValidatorComponent)
Prop | Required | Type | Default value | Description |
---|---|---|---|---|
validators | false | array | Array of validators. See list of default validators above. | |
errorMessages | false | array | Array of error messages. Order of messages should be the same as validators prop. |
|
name | true | string | Name of input | |
validatorListener | false | function | It triggers after each validation. It will return true or false |
Contributing
This component covers all my needs, but feel free to contribute.