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

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

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.

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.


shows 'true' on load

shows 'false' on load