Add a way to perform validation at the Field level

Hey ! First, thanks for the awesome work, I just discovered this project and it looks great.

TL;DR: It would be great to have validation at the Field level and not only at the Form level

There’s a feature that I think is missing, or I didn’t find any way to accomplish what I’d like to do: basically, I’d like to write custom input fields that can handle validation on their own. For example, if I create a “ColorPicker” component, I’d like it to automatically set it’s error message to “Invalid color” if the user enters an invalid color.

Basically, the only needed feature would be an additional property in the meta object given to Field customComponent, that would allow it to set its validity. So in addition to input.onChange, input.onBlur, … We could have either:

• meta.setValidity: a connect-ed action creator that would set the validity / error message for the current field
• meta.onValidate: or a validation method automatically called when the value is changed. Just like the validate property on reduxForm but at Field level

An other example of what it could provide, would be to write a form like this:

<MyForm>
  <MyTextField label="First name" name="firstName" required /> // <--- "required" is handled by TextField validation
  <MyTextField label="Country" name="country" validate={(value) => isValidCountry(value)} /> // <--- Custom validation at field level =)
</MyForm>

I think the current validation system is very limited and does not really take advantage of redux. If I wanted to add this feature with the current API I would need to wrap my form around an other HOC which would allow fields to register via context and automatically generate the validation function at form level. Or I could create a plugin to alter the state myself but I don’t think that’s a good solution.

[erikras]

Here you go!

Field-level validation in v6.3.0

[gaelollivier]

@davidkpiano Exactly like this ! I can’t find any way to implement this with the current API. I really think validation should be responsibility of the fields and not the form, or at least both options should be provided. I don’t like the idea of having to write a validate function that checks all my required fields for every form, when just a require on my input component would be enough.