Default .invalid returns false on page load for required fields/inputs

App Building
,
1

Goal
Create conditional logic to disable forms, buttons, or other objects using the 'Required' validation of other components (specifically, text inputs or select drop-downs).

Steps
I added components to the app and set all components as required. I created one variable to check with .invalid and it is not functioning as (I would have) expected. On page load, the .invalid returns 'false' when the value is empty.

Details
I would have expected a Required field to be invalid on page load. This means I cannot use .invalid to disable the Next button. I have to do a longer (and more likely to break) workaround of .selectedIndex === null and value.length.

Is this expected operation? To me, this is a bug, or at minimum, a misalignment on 'Required' validation. Maybe I'm just crazy. What's the best way to go about this?

Note; the true and false text boxes under the signature box, between Previous and Next, show the value of each variable. varFormDisabled on the left, varFormDisabledv2 on the right.

Screenshots:

image
image803×698 17.3 KB

shows 'true' on load
image

shows 'false' on load
image

2

Thanks for flagging this bug! I'll reach out when our team is able to prioritize a fix

1 Like
3

Hi, it’s still not fixed as of September 23. My form state shows that 'invalid' is false, even though the required fields are empty.

4

Do you have an ETA for this bugfix? On page load there is no programatic way to determine if a form is valid or not.

5

Agree, this is a very annoying bug, which makes form validation more complex. I'm running selfhosted 3.75.6

6

Hi all! Thanks for your input. I don't have any concrete update here, unfortunately. The relevant fix is ready for work but hasn't been added to a particular development cycle just yet. I've bumped a couple internal conversations to reflect your recent interest in getting this fixed and will provide an update here when I can!