How can i create HTML5 like required alert for radio button?

Question

For the input type text , if i add required attribute, my form won't submit and browser will focus on required field and alert will say please fill this field. For the input type radio , if i add required attibute, my form won't submit but also it does not provide me any alert or focus on the radio which is unchecked. If this is not an in-built functionality for HTML5, can i in some way create it and make it look like the same as it looks for text inputs so that style integrity is also preserved?

Answer 1

Beside required radio button alerts work "perfectly fine" in Chrome...

jsBin demo

it makes no sense at all to have an alert for a radio button, that's silly.
If you have a radio button:

1. there's absolutely no need to have only one radio button. → Use checkboxes.
2. there's absolutely no reason to have all radio buttons unchecked initially.
3. one must be checked by default - and it's your job to do so
4. logically there's no need to popup alerts like "This radio button is required" - therefore neither to set a required attribute to a radio button.

if you still don't understand why... well simple because radios are used as UI switch states. Only one can and must be checked . If you make them all initially unchecked - and a client unintentionally hits a radio - he's dead in the devil's loop, because once you enter the circle there's no way out . Therefore makes no sense to have all blanks in the first place. You cannot undo... (well, unless you have another silly checkbox or something that says "uncheck all radio buttons!" nonsense).

Answer 2

This code works well, if you not select radio, form will not submit. If you select one and enter text in textbox, form will submit.

<form>
    <input type="radio" name="one" value="1" required>
    <input type="radio" name="one" value="2" required>
    <input type="radio" name="one" value="3" required>
    <input type="text" name="two" required>
    <button>Submit</button>
<form>

Checked on latest version of Google Chrome. May be you found a bug in your browser, try to update it.