diff --git a/API.md b/API.md
index fa1a1983..4b3979aa 100644
--- a/API.md
+++ b/API.md
@@ -121,11 +121,11 @@ The first argument is the data of the form. The second argument will reset the f
```
Whenever the form becomes valid the "onValid" handler is called. Use it to change state of buttons or whatever your heart desires.
-#### onInvalid()
+#### onInvalid(invalidFields)
```html
```
-Whenever the form becomes invalid the "onInvalid" handler is called. Use it to for example revert "onValid" state.
+Whenever the form becomes invalid the "onInvalid" handler is called. Use it to for example revert "onValid" state. Receives an array containing the names of the invalid fields.
#### onValidSubmit(model, resetForm, invalidateForm)
```html
diff --git a/src/main.js b/src/main.js
index bf4a3ee2..6426515a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -361,6 +361,7 @@ Formsy.Form = React.createClass({
// Validate the form by going through all child input components
// and check their state
validateForm: function () {
+ var invalidFields;
var allIsValid;
var inputs = this.inputs;
var inputKeys = Object.keys(inputs);
@@ -368,10 +369,12 @@ Formsy.Form = React.createClass({
// We need a callback as we are validating all inputs again. This will
// run when the last component has set its state
var onValidationComplete = function () {
- allIsValid = inputKeys.every(function (name) {
- return inputs[name].state._isValid;
+ invalidFields = inputKeys.filter(function (name) {
+ return !inputs[name].state._isValid;
}.bind(this));
+ allIsValid = invalidFields.length === 0;
+
this.setState({
isValid: allIsValid
});
@@ -379,7 +382,7 @@ Formsy.Form = React.createClass({
if (allIsValid) {
this.props.onValid();
} else {
- this.props.onInvalid();
+ this.props.onInvalid(invalidFields);
}
// Tell the form that it can start to trigger change events
diff --git a/tests/Validation-spec.js b/tests/Validation-spec.js
index 211c4b5c..798d3334 100644
--- a/tests/Validation-spec.js
+++ b/tests/Validation-spec.js
@@ -90,6 +90,22 @@ export default {
},
+ 'should call the onInvalid handler with the name of the invalid fields': function (test) {
+
+ const onInvalid = sinon.spy();
+
+ TestUtils.renderIntoDocument(
+
+
+
+
+ );
+
+ test.equal(onInvalid.calledWith(['foo']), true);
+ test.done();
+
+ },
+
'should be able to use provided validate function': function (test) {
let isValid = false;
@@ -110,7 +126,7 @@ export default {
},
- 'should provide invalidate callback on onValiSubmit': function (test) {
+ 'should provide invalidate callback on onValidSubmit': function (test) {
const TestForm = React.createClass({
render() {