Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

5
  • This is a great solution. Works like a charm. However, in Firefox, I get a big red outline around the radio button box when it is set to required on all form controls using this radio button. Is there a way to style the outline to not be red when invalid (radio button not checked when required) except when the user hits submit and validation is carried out? Commented Sep 10, 2019 at 22:02
  • We can set radio's opacity to 0, and set opacity to 1 when submitted, so that we can control whether red outline appears or not. Commented Sep 13, 2019 at 13:59
  • This solution is genius!! In my case it didn't work if i use either visibility: hidden or display: none just to avoid getting the usability a little dirty. Because screen readers and other accessibility tools will probably find the hidden radio button. Commented Mar 9, 2020 at 14:52
  • Why not just use JavaScript, which is intended for that, rather than hidden HTML elements, which aren't? Commented Apr 6, 2021 at 14:20
  • Yeah, input type="radio" doesn't seem to work so great unfortunately (even in Firefox 98.0.1), but changing it to input type="text" works quite nicely. Of course, you end up getting the message "Please fill out this field" instead of "Please select one of these options" when one of the boxes aren't checked (assuming you don't also implement custom validation messages). But at least in my case, the former message still makes a lot of sense for a checkbox group since the checkboxes are contained in a field with a border like you might see on a physical (paper) form. Commented Dec 4, 2022 at 2:18