T
TanStack•2y ago
genetic-orange

how to remove errors properly when typing with onBlur validation

I’d like to achieve a nice UX following ideas like https://ux.stackexchange.com/a/134385 
Once the field is validated, and shows some errors, the user wants the error to vanish as soon as the edited value is correct, not when he leaves the field or submits the form (which probably will be disabled anyways as long as there are errors displayed).

This can be achieved by removing all errors from the field when it becomes dirty again (and revalidate it later on submit or focus lost)
Once the field is validated, and shows some errors, the user wants the error to vanish as soon as the edited value is correct, not when he leaves the field or submits the form (which probably will be disabled anyways as long as there are errors displayed).

This can be achieved by removing all errors from the field when it becomes dirty again (and revalidate it later on submit or focus lost)
So basically, is there an easy way to clear errors on a field when the user focuses / starts typing again if the validation is set to onBlur?
User Experience Stack Exchange
Real-Time validation, Good or Bad UX
I have a signup form where I made a REAL-TIME validation when the user starts typing as you see in the picture. I don't know if this harms the user experience or no, and also I did not find a resou...
2 Replies
xenial-black
xenial-black•2y ago
Yup! Should be pretty straightforward: 
<form.Field
  name="firstName"
  validators={{
    onBlur: ({ value }) => (value.includes('a') ? 'NO A' : undefined),
  }}
  children={(field) => {
    // Avoid hasty abstractions. Render props are great!
    return (
      <>
        <label htmlFor={field.name}>First Name:</label>
        <input
          id={field.name}
          name={field.name}
          value={field.state.value}
          onFocus={() => {
            field.setMeta((v) => ({ ...v, errorMap: {} }));
          }}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      </>
    );
  }}
/>
<form.Field
  name="firstName"
  validators={{
    onBlur: ({ value }) => (value.includes('a') ? 'NO A' : undefined),
  }}
  children={(field) => {
    // Avoid hasty abstractions. Render props are great!
    return (
      <>
        <label htmlFor={field.name}>First Name:</label>
        <input
          id={field.name}
          name={field.name}
          value={field.state.value}
          onFocus={() => {
            field.setMeta((v) => ({ ...v, errorMap: {} }));
          }}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      </>
    );
  }}
/>
genetic-orange
genetic-orangeOP•2y ago
It works great, thank you!

Did you find this page helpful?