Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input validation on blur should not apply to Pristine fields #245

Open
nireno opened this issue Dec 11, 2022 · 2 comments
Open

Input validation on blur should not apply to Pristine fields #245

nireno opened this issue Dec 11, 2022 · 2 comments

Comments

@nireno
Copy link
Contributor

nireno commented Dec 11, 2022

I'm comparing the behavior I'm experiencing with ReForm to this example from react-ux-form. In the react-ux-form example notice that first name is required but simply clicking into the field and then clicking out to cause a blur doesn't activate the error message. You have to actually "dirty" the field before the error message will appear.

An example use case where this is important is for a popup newsletter form. When the popup initially appears it auto-focuses the email field input. But a user who immediately clicks the popup-dismiss button is briefly shown an input validation error message even when they didn't mean to interact with the form at all.

@vmarcosp
Copy link
Member

Hmm, got it.
Could you provide a reproducible example? Just to make sure that we're on the same page with this behaviour.

@nireno
Copy link
Contributor Author

nireno commented Dec 22, 2022

If we take the signup form demo, I want to validate the email field on blur. So my naive approach would be:

      <Input
        value={form.values.email}
        onChange={ReForm.Helpers.handleChange(form.handleChange(Email))}
        placeholder="Email"
        error=?{form.getFieldError(Field(Email))}
        onBlur={_ =>
          form.getFieldState(Field(Email)) != Pristine ? form.validateField(Field(Email)) : ()}
      />

but that doesn't work because the field seems to always be pristine.

So I'm forced to simply validate on blur unconditionally.

      <Input
        value={form.values.email}
        onChange={ReForm.Helpers.handleChange(form.handleChange(Email))}
        placeholder="Email"
        error=?{form.getFieldError(Field(Email))}
        onBlur={_ => form.validateField(Field(Email))}
      />

Which gives the undesirable behavior of validating the pristine field.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants