React-redux-form: Validate fields together only after modification

[ashleyconnor]

The Codepen linked to in the README.md is 404'ing. I looked through the revision history and I can't seem to fork the old one either.

I had a quick question about only triggering error messages. If you have a password and password_confirmation field using show={{touched: true, focus: false}} triggers an error message after just entering/leaving the first password field. Is there a way to push that to just the confirmation for UX purposes? Not a good idea to annoy a user that the confirmation is invalid before they've reached the field.

I've got the JS ready to drop into your Codepen once the Forks are enabled.

Great library btw. Thank you for your hard work!

[davidkpiano]

Ah sorry, here's an updated link: http://codepen.io/davidkpiano/pen/yJwmEa/

[davidkpiano]

Also, would this be an <Errors> component to signify that password and password_confirmation do not match?

[ashleyconnor]

That's correct.

I've made an example here.

As you can see typing in the first field shows the error almost immediately before a user gets the chance to fill in the second. If it was possible to get the value of the first field in the second field's validation method, I think this could be solved by moving the Error component to be attached to the confirmation.

[divined]

Any news here?

Similar question:
Form level validator. How to show based on it by specific field touched status?

or how to create dependent rule one field from another. i.e.:

user.last_name && user.last_name.length && (!user.city || !user.city.length)

• city field is mandatory if last_name field is filled.

[divined]

required: (val, vals) => vals.last_name && vals.last_name.length && (!val || !val.length)

add whole form values to validation function?

[ashleyconnor]

I would only want to show an error if all fields I am validating have been 'touched'. So I would need values and the dirty status for all fields in the set.

I'm thinking maybe fieldset level validations could be a thing to maintain backwards compatibility of the existing validation API.

[davidkpiano]

Fieldset level validations are in progress, but you can also add form-level validations.

@divined:

city field is mandatory if last_name field is filled.

<Form model="user"
  validators={{
    '': { city_required: ({ city, last_name }) => last_name ? !!city : true }
  }}
>

@ashleyconnor:

I would only want to show an error if all fields I am validating have been 'touched'. So I would need values and the dirty status for all fields in the set.

Feel free to implement your own validation. The touched status is available on the forms slice of your store state (e.g., forms.user.city.touched, and it's simple enough to keep validation in component state by checking somewhere like componentDidUpdate:

if (forms.user.city.touched && forms.user.last_name.touched) {
  if (!isCityValid(user.city)) {
    this.setState({ cityValid: false });
  }
}

As an enhancement, I'll consider passing the form metadata as the second param for validation.

[divined]

@davidkpiano

ok, but how to say to "Error" component - show message only this two fields are touched?
because errors is appearing when you edit another part of form (

[divined]

if (forms.user.city.touched && forms.user.last_name.touched) {
forms <- what the variable? Where i can find it?

[davidkpiano]

@divined What does your store look like? You can connect(({ forms }) => ({ forms }))(YourComponent) and get it directly from there.

[divined]

founded, ty.

One more question:

Can't find action to update whole form. i.e. trigger all fields revalidating.

try:

changeAction={changeForm} to my component i want to trigger all form revalidate

and

function changeForm(model, value) {
  return (dispatch) => {
    dispatch(actions.change(model, value));
    dispatch(actions.setPristine('forms.user')); <-what here?
  };
}

[shinzui]

As an enhancement, I'll consider passing the form metadata as the second param for validation.

Please do that. It would make validation easier.