|
1 | | -## Validation component for material-ui forms |
| 1 | +## Validation component for material-ui v1 forms |
2 | 2 |
|
3 | 3 | [](https://opensource.org/licenses/MIT) |
4 | 4 | [](https://badge.fury.io/js/react-material-ui-form-validator) |
5 | 5 | [](https://travis-ci.org/NewOldMax/react-material-ui-form-validator) |
6 | 6 |
|
7 | 7 | ### [Demo](https://newoldmax.github.io/react-material-ui-form-validator/) |
8 | 8 |
|
| 9 | +### Installation |
| 10 | + |
| 11 | +```` |
| 12 | +npm install react-material-ui-form-validator@next |
| 13 | +```` |
| 14 | + |
9 | 15 | ### Versions |
10 | | -+ 0.x - supports material-ui <= 0.x |
11 | | -+ 1.x - supports material-ui >= 1.x (experimental support, you can install it by ``npm i react-material-ui-form-validator@next``) |
| 16 | ++ 0.x, 1.x - supports material-ui <= 0.x |
| 17 | ++ 2.x - supports material-ui >= 1.x (experimental support, you can install it by ``npm i react-material-ui-form-validator@next``) |
12 | 18 |
|
13 | | -Simple form validation component for material-ui library inspired by [formsy-react](https://github.com/christianalfoni/formsy-react) |
| 19 | +Implementation of [react-form-validator-core](https://www.npmjs.com/package/react-form-validator-core) for [material-ui v1](https://material-ui-next.com/) |
14 | 20 |
|
15 | 21 | Supported types: |
16 | | -+ Text ([TextValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TextValidator.jsx)) |
17 | | -+ Select ([SelectValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/SelectValidator.jsx)) |
18 | | -+ AutoComplete ([AutoCompleteValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/AutoCompleteValidator.jsx)) |
19 | | -+ Date ([DateValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/DateValidator.jsx)) |
20 | | -+ Time ([TimeValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TimeValidator.jsx)) |
21 | | - |
22 | | -Default validation rules: |
23 | | -+ matchRegexp |
24 | | -+ isEmail |
25 | | -+ isEmpty |
26 | | -+ required |
27 | | -+ trim |
28 | | -+ isNumber |
29 | | -+ isFloat |
30 | | -+ isPositive |
31 | | -+ minNumber |
32 | | -+ maxNumber |
| 22 | ++ Text ([TextValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/v1/src/TextValidator.jsx)) |
| 23 | ++ Select ([SelectValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/v1/src/SelectValidator.jsx)) |
33 | 24 |
|
34 | 25 | Some rules can accept extra parameter, example: |
35 | 26 | ````javascript |
@@ -59,7 +50,7 @@ class MyForm extends React.Component { |
59 | 50 |
|
60 | 51 | constructor(props) { |
61 | 52 | super(props); |
62 | | - |
| 53 | + this.state = {}; |
63 | 54 | this.handleChange = this.handleChange.bind(this); |
64 | 55 | } |
65 | 56 |
|
@@ -229,26 +220,6 @@ export default CheckboxValidatorElement; |
229 | 220 |
|
230 | 221 | ##### [Advanced usage](https://github.com/NewOldMax/react-material-ui-form-validator/wiki) |
231 | 222 |
|
232 | | -### API |
233 | | -
|
234 | | -#### ValidatorForm |
235 | | -
|
236 | | -| Prop | Required | Type | Default value | Description | |
237 | | -|-----------------|----------|----------|---------------|------------------------------------------------------------------------------------------------------------------------------| |
238 | | -| onSubmit | true | function | | Callback for form that fires when all validations are passed | |
239 | | -| 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. | |
240 | | -| onError | false | function | | Callback for form that fires when some of validations are not passed. It will return array of elements which not valid. | |
241 | | -
|
242 | | -#### All validated fields (ValidatorComponent) |
243 | | -
|
244 | | -| Prop | Required | Type | Default value | Description | |
245 | | -|-----------------|----------|----------|---------------|----------------------------------------------------------------------------------------| |
246 | | -| validators | false | array | | Array of validators. See list of default validators above. | |
247 | | -| errorMessages | false | array | | Array of error messages. Order of messages should be the same as `validators` prop. | |
248 | | -| name | true | string | | Name of input | |
249 | | -| validatorListener | false | function | | It triggers after each validation. It will return `true` or `false` | |
250 | | -
|
251 | | -
|
252 | 223 | ### Contributing |
253 | 224 |
|
254 | 225 | This component covers all my needs, but feel free to contribute. |
0 commit comments