T
TanStack•6mo ago
sensitive-blue

onBlur form field validator doesn't seem to do what I expect it to do

<form.Field name="price" validators={{ onBlur: ({ value }) => value < 8 ? "Client validation: Price must be greater than 8" : undefined, }} > This code results in only validating the field on submit and not on blur, why? NextJs example: https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions?path=examples%2Freact%2Fnext-server-actions%2Fsrc%2Fapp%2Fclient-component.tsx
React TanStack Form Next Server Actions Example | TanStack Form Docs
An example showing how to implement Next Server Actions in React using TanStack Form.
9 Replies
correct-apricot
correct-apricot•6mo ago
Have you added field.handleBlur to the field you want to validate on blur as well?
sensitive-blue
sensitive-blueOP•6mo ago
where do I need to put that I don't have it
sensitive-blue
sensitive-blueOP•6mo ago
that's all i have
No description
sensitive-blue
sensitive-blueOP•6mo ago
No description
stormy-gold
stormy-gold•6mo ago
on the <input> 
// Listen to the onBlur event on the field
onBlur={field.handleBlur}
// Listen to the onBlur event on the field
onBlur={field.handleBlur}
adverse-sapphire
adverse-sapphire•6mo ago
@ralf as ksgn has said you need to pass the handleBlur to whatever input or component you are using, otherwise form will not know that the field has been blurred. 
<input
  name="price"
  type="number"
  value={field.state.value}
  onChange={(e) => field.handleChange(e.target.valueAsNumber)
  }
  onBlur={field.handleBlur}
/>
<input
  name="price"
  type="number"
  value={field.state.value}
  onChange={(e) => field.handleChange(e.target.valueAsNumber)
  }
  onBlur={field.handleBlur}
/>
I would guess that the it only validates onSubmit is because in the next example, there's a server validation onSubmit. So you're essentially not calling the onBlur validation, and the server is validating onSubmit.
correct-apricot
correct-apricot•6mo ago
Think you tagged the wrong person 😄 You likely meant to tag OP, but thanks though! Not exactly sure how discord handles it, but OP would probably get a notification regardless.
adverse-sapphire
adverse-sapphire•6mo ago
sensitive-blue
sensitive-blueOP•6mo ago
ahhh great thank you so much!! now it works!! you know anything about this: https://discord.com/channels/719702312431386674/1354711137626882149?

Did you find this page helpful?