#Multi step form - How to disable "next" button if current visible inputs aren't valid

22 messages · Page 1 of 1 (latest)

uncut osprey
#

I made multi step form. I navigate between steps with "back" and "next" buttons. I want to disable next button if current visible inputs aren't valid. Currently validation is applied but i can still navigate forward and back between steps. I could use field value and for each one individual check if it is valid but this seems very inefficient any other suggestions.

Just for visualization purposes here is my code

 return (
   <Form {...form}>
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
       {currentStep}
       <div className="flex justify-between gap-4">
         {!isFirstStep && (
           <Button type="button" variant="outline" onClick={back}>
             Back
           </Button>
         )}

         {!isLastStep ? (
           <Button onClick={next}>Next</Button>
         ) : (
           <Button>Submit</Button>
         )}
       </div>
     </form>
   </Form>
 );
deft roostBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

desert birch
#

Zod, Yup, react hook forms and those have an isValid method that check your schema conditions

west heron
#

I recommend using useStep

#

It'll help you with validations

uncut osprey
#

I face problem that normal button submits when submit buttom is visible if i comment it out it works fine.

# 
   <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        {steps[currentStep - 1].component}
        <div className="flex justify-end gap-4">
          {currentStep > 1 && (
            <Button type="button" variant="outline" onClick={goToPrevStep}>
              Back
            </Button>
          )}
          {currentStep === steps.length ? (
            <Button type="submit">Submit</Button>
          ) : (
            <Button type="button" onClick={goToNextStep}>
              Next
            </Button>
          )}
        </div>
      </form>
uncut osprey
west heron
#

Oh and for disabling next button, You can use zod to create schema

#

if there are any errors in schema, just disable it

uncut osprey
#

but it will disabled it in every case as next step is not yet touched

west heron
#

Umm, I didn't get you

uncut osprey
#

I have multi step form. if i try to disable button for the first step it will stay disabled as there is second step. This is not 2 seperate forms but 1 form with 2 steps

west heron
#

Ahh got it.

#

Its better if you divide it into 2 components, and create different zod schema, and merge them in main component

uncut osprey
#

Well step 3 is payment and if payment isn't compleate I don't create any of that before. else random folks could populate my db and all i have is costs of resources from them

#

Did you mean another form or just splitted component inside one form

west heron
#

So don't create any of that?

#

only create when payment is completed

west heron
#

@uncut osprey updates?

uncut osprey
#

I am still woeking on that. Loosing my mind but sure