absent-sapphire

How to set submit as disabled until form completed?

I have a basic form. 2 fields. Right now I'm doing the following to set the submit as disabled on page load.

<form.Subscribe
        selector={(state) => [state.canSubmit, state.isSubmitting, state.isPristine]}
        children={([canSubmit, isSubmitting, isPristine]) => (
            <Button
              fullWidth
              disabled={isPristine || !canSubmit}
              color="green"
              type="submit"
              leftSection={<Icon icon="save" type="far" />}
              loading={isSubmitting as boolean}
            >
            Login
          </Button>
        )}
      />

<form.Subscribe
        selector={(state) => [state.canSubmit, state.isSubmitting, state.isPristine]}
        children={([canSubmit, isSubmitting, isPristine]) => (
            <Button
              fullWidth
              disabled={isPristine || !canSubmit}
              color="green"
              type="submit"
              leftSection={<Icon icon="save" type="far" />}
              loading={isSubmitting as boolean}
            >
            Login
          </Button>
        )}
      />

Problem is. When I complete the first field. The submit will be enabled. The UX that I'm looking for. Is that I only want the submit button to be enabled only when both fields have passed validation. Is this possible? Thanks!

16 Replies

rare-sapphire•9mo ago

well, you'll need validators on both field to make sure that they're not empty, presumably onMount and onChange... Then the forms state will be canSubmit === false until they're filled in

absent-sapphireOP•9mo ago

I have onChange validators for both fields and when I console.log canSubmit, it's true on page init

rare-sapphire•9mo ago

yes, because the validators only fire when the field has changed... you need a validator for onMount to set the fields state as invalid when it is mounted

absent-sapphireOP•9mo ago

But won't that show the error messages for the validators?

rare-sapphire•9mo ago

I think this discussion has a stackBlitz for the same thing you're trying to do. https://github.com/TanStack/form/discussions/1255

GitHub

canSubmit and isValid is true by default? · TanStack form · D...

😕 When I build a simple form with validation and subscribe using useStore the initial values for both canSubmit and isValid is true. That seems like an odd choice for initial values, but maybe I&#3...

absent-sapphireOP•9mo ago

Thank you! That has exactly what I needed. I wonder why this isn't the default? 🤔

rare-sapphire•9mo ago

absent-sapphireOP•9mo ago

Great, I'll take a look later. Also thanks for your works on the library! Definitely appreciate your contributions on the close to v.1.0!

rare-sapphire•9mo ago

no worries, always happy to be of help

continuing-cyan•9mo ago

I would also always be careful with this UX pattern (disabling submit buttons, or disabling anything really). In this case its only two fields, but on a larger form its easy to miss some required field and then wonder "why is this disabled?". I often find it better to leave the button as is and move the focus to the first invalid field if the user tries to submit with validation errors.

rare-sapphire•9mo ago

Thats a valid point

absent-sapphireOP•9mo ago

I have much more complex forms where this behaviour is desired. It's never been an issue in the past. But thanks anyway. I followed up on the github issue. Sadly it's not working.

rare-sapphire•9mo ago

Yeah… I need to confirm this but the second part of what I wrote should be correct. The tanstack store is a separate entity that is mounted in the constructor of the formApi which is what the useStore is subscribed to. Hence why it shows the default values, however when the form is mounted it runs the onMount validator which puts it into the isValid false state. I get why this would raise eyebrows, but at the point in time where isValid = true the form isn’t mounted. Let me just confirm, and perhaps I could suggest extending the defaultValues with isValid or even noting this in the docs. Because even though the form isn’t mounted yet, I can see this creating work for us in the form of explaining this 🤘

absent-sapphireOP•9mo ago

Would it be possible to be able to set the form state by a useEffect? Could that be an easy fix? I tried doing that but it didn't stick... perhaps there were other mechanisms behind the scenes from preventing this. But something the team could think about?

rare-sapphire•9mo ago

This was a little more complicated than I though, but know I'm looking in to it... I'll get back to you when i have an answer but I think I know the cause

absent-sapphireOP•9mo ago

Oh nice! Thanks for taking a look. Take your time. For me, it's enough that you are looking into it. 😄

Gaming

Programming

How to set submit as disabled until form completed?

Did you find this page helpful?