1

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?

Sumit Nalawade
  • 71
  • 7

2 Answers2

-1

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.

Profesor08
  • 1,181
  • 1
  • 13
  • 20
  • if you read my question carefully, i'm not denying that the form validation fails, i'm saying it does not give an alert for radio – Sumit Nalawade Mar 07 '17 at 18:38
-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).

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 2
    You haven't met my clients... ;) – Heretic Monkey Mar 07 '17 at 18:49
  • @MikeMcCaughan sorry I don't believe this *client* stories. in 8Y of front-end web development if I said to my client that his idea is stupid - they always believed me. That's also your job. – Roko C. Buljan Mar 07 '17 at 18:50
  • 1
    Totally agree. I always suggest, that if they must "require" a radio button, that they add a "None" option that is initially checked. Then the validation is that the "None" option is not checked. – Heretic Monkey Mar 07 '17 at 18:56
  • @RokoC.Buljan this is indeed a client story :P otherwise i wouldn't have bothered to think about radio button validation as it's best practice to have one value checked always. – Sumit Nalawade Mar 07 '17 at 19:01
  • @SumitNalawade :) well in that case hope to have unveiled the best practice and helped you to get to (hopefully/eventually) a better UI solution :) – Roko C. Buljan Mar 07 '17 at 21:37
  • @MikeMcCaughan now we're talking ;) 100% agreed – Roko C. Buljan Mar 07 '17 at 21:38