T
TanStack•3d ago
ratty-blush

Validate Form but not submitting

Is there a way to validate the input without submitting the form? already tried this 
<Button
  className="flex-1"
  onClick={async () => {
    const isValid = await organizationForm.validate("submit");
    if (isValid) {
      setIsDialogOpen(true);
    }
  }}
>
  Next
</Button>
<Button
  className="flex-1"
  onClick={async () => {
    const isValid = await organizationForm.validate("submit");
    if (isValid) {
      setIsDialogOpen(true);
    }
  }}
>
  Next
</Button>
but didnt work. the error validation did not appear
4 Replies
like-gold
like-gold•3d ago
Preventing invalid forms from being submitted Is that what you're looking for? If not - what does your code look like to display the errors?
Form and Field Validation | TanStack Form React Docs
At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable: You can control when to perform the validation (on change, on input, on...
ratty-blush
ratty-blushOP•3d ago
i just want to trigger zod validator without submitting the form the plan is : success flow: fill the form -> click "continue" button -> zod validator triggered -> form is valid -> open alert dialog -> click save button -> trigger the form. error flow: fill the form -> click "continue" button -> zod validator triggered -> form is invalid -> -> error show on each field -> dialog alert not open
fascinating-indigo
fascinating-indigo•3d ago
the form's submission process is arbitrary. It doesn't need to be "send data to the server", in this case, it's more appropriate to say "show dialog when successful" in that case, form.handleSubmit would be the submission attempt, and onSubmit would open the dialog. Clicking the save button would just send the data forward In that case, the new flows would be: success flow: fill the form -> click "continue" button -> form.handleSubmit -> onSubmit opens alert dialog -> click save button -> trigger endpoint. error flow: fill the form -> click "continue" button -> form.handleSubmit -> error show on each field -> onSubmitnever reached
ratty-blush
ratty-blushOP•3d ago
somehow i didn't think of that way. thanksss

Did you find this page helpful?