Disabling Form Submission By Default Unless 'Validate Form' Button Is Clicked

Hi,

I am looking to set up a form where the submit button is disabled initially. The user has to click the 'validate form' button which has a javascript query in the background. If that javascript query returns true, then the submit button on the form becomes enabled, otherwise it remains disabled.

How do I do that? I currently set the disable form submission component to true to make disable it by default but how do I turn it to false depending on the output of my javascript query?


Screenshot 2021-11-16 at 12.18.07

Hi @et_retool! In your "Disable form submission" field, you can use double curly braces to put in dynamic values.

For example, if your JS query is returning true and you'd like to enable the form, you can use {{ !jsQuery1.data }} in your "Disable form submission" field.

Let me know how this works for you.

Hello, I know this is an old question but this is what I found when searching for an answer and thought I could help out, if only anyone else looking for a solution.

What we ended up doing for forms is

  1. Create a Form and Enable validation and enable submit.
  2. Do not add a mutation or backend call to submit data to the form event handlers so that we can validate on pressing enter
  3. Add a button somewhere and add a mutation or backend call to submit data that saves it
    :sweat_smile:

hope this helps.

1 Like