Added validatorListener for fields.

Author: m.volkov

Readme.md

@@ -230,6 +230,7 @@ export default CheckboxValidatorElement;
 | 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-material-ui-form-validator",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Simple validator for forms designed with material-ui components.",
   "main": "./lib/index.js",
   "scripts": {

src/AutoCompleteValidator.jsx

@@ -8,7 +8,7 @@ export default class AutoCompleteValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, validatorListener, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <AutoComplete

src/DateValidator.jsx

@@ -8,7 +8,7 @@ export default class DateValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, validatorListener, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <DatePicker

src/SelectValidator.jsx

@@ -8,7 +8,7 @@ export default class SelectValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, validatorListener, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <SelectField

src/TextValidator.jsx

@@ -8,7 +8,7 @@ export default class TextValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, validatorListener, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <TextField

src/TimeValidator.jsx

@@ -8,7 +8,7 @@ export default class TimeValidator extends ValidatorComponent {
 
     render() {
         // eslint-disable-next-line
-        const { errorMessages, validators, requiredError, errorText, ...rest } = this.props;
+        const { errorMessages, validators, requiredError, errorText, validatorListener, ...rest } = this.props;
         const { isValid } = this.state;
         return (
             <TimePicker

src/ValidatorComponent.jsx

@@ -31,14 +31,19 @@ class ValidatorComponent extends React.Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (this.instantValidate) {
+        if (this.instantValidate && nextProps.value !== this.props.value) {
             this.validate(nextProps.value);
         }
-        if (nextProps.validators && nextProps.errorMessages) {
+        if (nextProps.validators && nextProps.errorMessages &&
+            (this.props.validators !== nextProps.validators || this.props.errorMessages !== nextProps.errorMessages)) {
             this.setState({ validators: nextProps.validators, errorMessages: nextProps.errorMessages });
         }
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return this.state !== nextState || this.props !== nextProps;
+    }
+
     componentWillUnmount() {
         this.context.form.detachFromForm(this);
     }
@@ -85,7 +90,9 @@ class ValidatorComponent extends React.Component {
             }),
         );
 
-        this.setState({ isValid: valid });
+        this.setState({ isValid: valid }, () => {
+            this.props.validatorListener(this.state.isValid);
+        });
     }
 
 
@@ -110,11 +117,13 @@ ValidatorComponent.propTypes = {
     validators: PropTypes.array,
     name: PropTypes.string,
     value: PropTypes.any,
+    validatorListener: PropTypes.func,
 };
 
 ValidatorComponent.defaultProps = {
     errorMessages: 'error',
     validators: [],
+    validatorListener: () => {},
 };
 
 export default ValidatorComponent;

src/ValidatorForm.jsx

@@ -136,7 +136,7 @@ class ValidatorForm extends React.Component {
 
     render() {
         // eslint-disable-next-line
-        const { onSubmit, instantValidate, ...rest } = this.props;
+        const { onSubmit, instantValidate, onError, ...rest } = this.props;
         return (
             <form {...rest} onSubmit={this.submit}>
                 {this.props.children}