Don't show errors until field is blurred?

It was hard to come up with a good title for this, sorry.

I’m essentially interested in a feature of redux-form that let’s us not show an error on a field unless the field received a blur event or the user submitted the form. This leads to less noise when filling out an empty form, as the user can enter data without being nagged by error displays while typing.

Main use case: Entering e.g. an email-address (or phone numbers or addresses). With mobx-forms, as soon as the users starts to type, the field is touched and has errors and we hence display those errors.

With redux-forms, however, touched is only set after the field receives a blur event or the form is submitted (the field is validated in any case, though). This allows us to only show the error after the user is done with the field.

There’s a visited flag that is similar to mobx-form’s touched.

Here’s a demo that shows the behavior (the redux devtools chrome extension is handy here, as it can display the whole state):

http://redux-form.com/6.6.0/examples/syncValidation/

Just start typing in the email field and compare it to how mobx-forms handles this use case.

Empty form:

Starting to type (no error is shown, although there is one in the state):

(note that there is an error, but no touched)

Pressing <tab> moves to the next field and shows the error:

To close, I’m also fine with having to implement this stuff on my side, I’m just very unsure of how to best do that. Any pointers appreciated!

[nuschk]

interacted is certainly better than edited. Yeah, it’s not crystal clear either, but, well, naming is hard.

You could also name it by its purpose and thus showError and put it next to hasError. This way, of course, it could only ever be true if the field has errors.

[nuschk]

@foxhound87 I agree with naming that prop touched is misleading. I find your definition much less confusing. edited is not really better, though, so I’m still looking for a better name… 😄