T
TanStack•4w ago
like-gold

Force Blur for Manual Validation (Solved)

Maybe I'm missing something simple, but I'm struggling with handling validation properly in the forms. I need to have it handle so that it only shows the error if the field has been blurred, so that when someone types "t" the entire form just doesn't show errors onChange. Each field will only show the errors when they have been blurred, However, I need to then have the ability to show the errors if the user clicks on the submit button before its valid (my submit will call an onClick instead of submit if the form is not valid). But I don't know how to remove the isBlurred part. This seems like a super common case, so maybe its because I only work on this at 11pm lmao, but surely there are lots of people who don't want errors until submission / blur, and then want those errors to be fixed on change once they appear. Context: 
  const { state, handleBlur, handleChange } = useFieldContext<string | number | readonly string[] | undefined>()
  const {
    value,
    meta: { errors, isDirty, isBlurred },
  } = state
  /*****  RENDER  *****/
  return (
    <Input
      {...props}
      value={value}
      onChange={(e) => handleChange(e.target.value)}
      onBlur={handleBlur}
      error={isDirty && isBlurred && errors?.[0]?.message}
    />
  )
  const { state, handleBlur, handleChange } = useFieldContext<string | number | readonly string[] | undefined>()
  const {
    value,
    meta: { errors, isDirty, isBlurred },
  } = state
  /*****  RENDER  *****/
  return (
    <Input
      {...props}
      value={value}
      onChange={(e) => handleChange(e.target.value)}
      onBlur={handleBlur}
      error={isDirty && isBlurred && errors?.[0]?.message}
    />
  )
<form.Subscribe selector={({ canSubmit, isSubmitting }) => ({ canSubmit, isSubmitting })}>
      {({ canSubmit, isSubmitting }) => (
        <Button
          type={canSubmit ? "submit" : "button"}
          disabled={isSubmitting}
          onClick={() => !canSubmit && form.validateAllFields("change")}
          color="sky"
        >
          {label ?? "Submit"}
        </Button>
      )}
    </form.Subscribe>
<form.Subscribe selector={({ canSubmit, isSubmitting }) => ({ canSubmit, isSubmitting })}>
      {({ canSubmit, isSubmitting }) => (
        <Button
          type={canSubmit ? "submit" : "button"}
          disabled={isSubmitting}
          onClick={() => !canSubmit && form.validateAllFields("change")}
          color="sky"
        >
          {label ?? "Submit"}
        </Button>
      )}
    </form.Subscribe>
This is my input and button. validateAllFields won't work (as in show the errors) because of the "isBlurred" and possible also the isDirty. But i need these
4 Replies
quickest-silver
quickest-silver•4w ago
some notes to make this easier: * form.handleSubmit() checks for canSubmit and exits early if it's false, so there's no harm in calling it. * even if a submission failed (or is currently not possible), submissionAttempts will be increased. So if you want to force errors to show if a user submits without blurring, use submissionAttempts > 0 as check
like-gold
like-goldOP•4w ago
oh yeah you helped me double, found a post in the github from you as well, theres a .form in the field for a field.form.state.submissionAttempts which is perfect for my needs. 
  const { state, handleBlur, handleChange, form } = useFieldContext<string | number | readonly string[] | undefined>()
  const {
    value,
    meta: { errors, isDirty, isBlurred },
  } = state
  /*****  RENDER  *****/
  return (
    <Input
      {...props}
      value={value}
      onChange={(e) => handleChange(e.target.value)}
      onBlur={handleBlur}
      error={((isDirty && isBlurred) || form.state.submissionAttempts > 0) && errors?.[0]?.message}
    />
  )
  const { state, handleBlur, handleChange, form } = useFieldContext<string | number | readonly string[] | undefined>()
  const {
    value,
    meta: { errors, isDirty, isBlurred },
  } = state
  /*****  RENDER  *****/
  return (
    <Input
      {...props}
      value={value}
      onChange={(e) => handleChange(e.target.value)}
      onBlur={handleBlur}
      error={((isDirty && isBlurred) || form.state.submissionAttempts > 0) && errors?.[0]?.message}
    />
  )
This seems to work as expected, which silves that issue, and simplifys my button as it can just submit always as you say, Thanks
quickest-silver
quickest-silver•4w ago
glad to hear! One more thing which might not be obvious: isBlurred is currently a one way street. It doesn't unblur at change or something like that by default. It's possible to get around that, but hopefully that works!
like-gold
like-goldOP•4w ago
yeah thats exactly what I want too, once its blurred, onChange validation (I don't actually use the onBlur validation, no need) is great.

Did you find this page helpful?