Currently, an input field will turn red if its value is invalid before the user is even finished typing.
For example…
The user hasn’t even finished entering their phone number, and are already being told it is invalid. Since this is not proper UX, I’m wondering if maybe we could only check/update an input’s validity when it is not in focus.
I guess you can modify the condition to isn’t valid AND isn’t focused
That’s not a bad idea… the only problem with that is that when you go to correct the input with an error, typically it should stay red until after you are no longer focused on it.
I think that you can also add a state yes/no
Trigger workflow If input field has changed AND isn’t valid AND isn’t focused
Set state : YES and set the style condition to state to yes.
Another workflow will trigger on input field has changed AND is valid AND isn’t focused
Set state : False.
More complicated but I think this should work.
Wouldn’t that still prevent it from staying red when focused?
It should only be red (invalid) in three scenarios, with the third being most tricky:
It should only be blue in one scenario:
The system checks for validity during input, but it should really only check for it after it is no longer focused.
No it won’t because the State will stay the same until the user leave the input and the value is valid
Ah I see, these would be in addition to the default condition.
…In that case, how is the field prevented from turning red during user input? (e.g. when a field is focused on by the user for the first time, and hasn’t finished entering their phone number, the system still recognizes it as invalid).
No I replace the native condition because we cannot choose a state in style.
Got it. Thanks! I do hate that it requires a workaround, when it should be standard UX.
The issue is that the validity of the input’s value is evaluated after the user click outside of the input.
I agree the default behavior is confusing for users @Bubble. It should be evaluated in real time (technically possible I guess) so when the user finally types a valid value the state “is not valid” get disabled.
Currently I believe it is evaluated during but on a delay. So if you enter an incorrect value and sit there for a few seconds it will turn red. Or, if you correct an invalid field and wait a few seconds before clicking off of it it turns blue again. I sort of understand the logic behind this.
Ideally though, @Bubble it would only register as “invalid” when clicked off of, and only use real time to register it as “valid”. The idea is for inputs not to register as invalid when the user is still typing.
i think it’s possible to do it with the Trigger When condition is true and set to every time.
It’s possible, I just wish it didn’t require the extra effort of a workaround. It should really be standard.
What about when the field is a required field? How to keep it from being red on page load?
I’m guessing the best workaround is to override the “field should not be empty” with a workflow that’s triggered on all empty fields upon save/submission button click.
