Feature/on invalid fieldnames

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.
 
-#### <a name="oninvalid">onInvalid()</a>
+#### <a name="oninvalid">onInvalid(invalidFields)</a>
 ```html
 <Formsy.Form onInvalid={this.disableSubmitButton}></Formsy.Form>
 ```
-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.
 
 #### <a name="onvalidsubmit">onValidSubmit(model, resetForm, invalidateForm)</a>
 ```html

src/main.js

@@ -361,25 +361,28 @@ 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);
 
     // 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
       });
 
       if (allIsValid) {
         this.props.onValid();
       } else {
-        this.props.onInvalid();
+        this.props.onInvalid(invalidFields);
       }
 
       // Tell the form that it can start to trigger change events

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(
+      <Formsy.Form onInvalid={onInvalid}>
+        <TestInput name="foo" required />
+        <TestInput name="bar" value="baz" />
+      </Formsy.Form>
+    );
+
+    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() {