Question:
What is wrong with my logic or JavaScript code? This example form holds 3 inputs. A radio group sandwiched between to text input fields.
Current behavior:
From the top of the form, tab into Text-01. Tab out of that field. The error “An entry is required in this field.” is correctly displayed.
–>> Also the undesired error message for the radio group is displayed.
Focus is returned to Text-01.
Add some input to Text-01, and tab out and through the radios.
–>> Undesired: Focus is not returned to the empty radio group.
Desired behavior
From the top of the form, tab into Text-01. Tab out of that field. The error “An entry is required in this field.” is correctly displayed.
–>> No other error message should be seen.
Focus is returned to Text-01.
Add some input to Text-01, and tab out.
The error message is removed.
Tab through the radios leaving them unchecked.
The error message should be displayed.
–>> Focus should be returned to the empty radio group.
Check a radio.
The error message is removed, focus goes to the next fiels.
Repl link:
https://replit.com/@FKlusmann/HTML-CSS-JS
All of AI’s suggestions have failed. My original script is there now.
code snippet
(SEE THE LINK)