React-redux-form: Validation on entire form triggers a wrong "rrf/setSubmitFailed" when validation passes again

[zabojad]

If I have a form with a validation rule on the form model (with key ""):

<Form model="my_model"
      validateOn="submit"
      validators={{
        "": [ function(m){ return myValidators.match(m.password,m.passwordConfirmation); } ],
        password: [ myValidators.isRequired, myValidators.isPassword ],
        passwordConfirmation: [ myValidators.isRequired ],
      }}
      onSubmit={props.onSubmit}>

    <br />Password <br />
    <Field model="my_model.password">
        <input type="password" />
    </Field>
    <Errors model="my_model.password"
        messages={{
            "0": "Password is required",
            "1": "The password must be at least 6 characters long"
        }}
        show={{ touched: true, focus: false }} />

    <br />Retype your password <br />
    <Field model="my_model.passwordConfirmation">
            <input type="password" />
    </Field>
    <Errors model="my_model.passwordConfirmation"
             messages={{
            "0": "Password is required"
             }}
             show={{ touched: true, focus: false }} />
    <Errors model="my_model"
             messages={{
            "0": "Password and password confirmation must match"
             }}
             show={{ touched: true, focus: false }} />

    <div>
        <button type="submit">Next</button>
    </div>
</Form>

Now if I input values that trigger a validation error:

{"type":"rrf/setSubmitFailed","model":"my_model"}
{"type":"rrf/setFieldsValidity","model":"my_model","fieldsValidity":{"":{"0":true},"password":{"0":false,"1":false},"passwordConfirmation":{"0":false}},"options":{"errors":true}}

And then correct the input so that there is no more validation error, I then have to click on submit twice because the first time I click on submit, it will trigger:

{"type":"rrf/setSubmitFailed","model":"my_model"}    <= it should NOT trigger this
{"type":"rrf/setFieldsValidity","model":"my_model","fieldsValidity":{"":{"0":false},"password":{"0":false,"1":false},"passwordConfirmation":{"0":false}},"options":{"errors":true}}

And the second click will trigger just this:

{"type":"rrf/setFieldsValidity","model":"my_model","fieldsValidity":{"":{"0":false},"password":{"0":false,"1":false},"passwordConfirmation":{"0":false}},"options":{"errors":true}}

Version `"react-redux-form": "^0.13.1"``

[i4got10]

Also meet that issue today.
To simplify you just need form(with _validators_ prop) with one field(field must be without _validator_ prop).
Every time after input will become valid, you need to press button twice.

<Form
    model={MODEL}
    validators={{name: val => !!val}}
    onSubmit={this._save}
    validateOn="submit"
>
    <TextField model={`${MODEL}.name`}>
        <input/>
    </TextField>
    <button type="submit">submit</button>
</Form>

[davidkpiano]

Fixed! In case you were wondering what the issue was:

-   const formValid = form
+   const formValid = (form && !fieldsValidity.hasOwnProperty(''))
      ? form.valid
      : true;

The formValid flag was being determined on the _existing_ validity of the form, and not taking into account the _new_ validity. Now it does!

This fix also improves performance slightly, as the callback functions for handling valid form submits are no longer recreated each time in render() - they're only created once.

[i4got10]

Will wait for release 👍