How to indicate that a group of radio buttons are required

Question

I understand how to place an icon in a text field to indicate to the user that it is required and in HTML5 form get the tip indicating that the field should be filled out.

is there any similar mechanism for radio buttons and check boxes?

Below is a simple group of radio buttons that I am using.

  <!DOCTYPE html>

  <polymer-element name='marital-status-form'>
    <template>
    <style">

      #col1 { order:1; }
      #col2 { order:2; align-self:flex-start; }
      #hr { order:3; }

    </style>
      <form id='form'
            name='form'
            on-change='{{updateModel}}'>

        <section 
          <label for='marriedRdo' id='marriedLbl' >Married</label>
          <label for='divorcedRdo' id='divorcedLbl' >Divorced</label>
          <label for='singleRdo' id='singleLbl' >Single</label>
          <label for='visitingRdo' id='visitingLbl' >Visiting</label>

        </section>

        <section >
          <input id='marriedRdo'
                 name='status'
                 type="radio"
                 value='Married'
                 on-click='{{submit}}'>
          <input id=divorcedRdo name='status' type='radio' value='Divorced'>
          <input id='singleRdo' name='status' type="radio" value='Single' >
          <input id=visitingRdo name='status' type='radio' value='Visiting'>
        </section>

        <hr id='hr'>
        <delete-dispatch-form id='delete-dispatch-form'></delete-dispatch-form>

        <button id='submit-btn'
          type='submit'></button>

        </form>
      </template>

     <script type="application/dart">

      import 'package:polymer/polymer.dart' show CustomTag, observable, PolymerElement;

      import 'dart:html' show Event, Node, InputElement;


      @CustomTag( 'marital-status-form')
      class MaritalStatusForm extends RooleElement
      {
        @observable String choice= '';

        MaritalStatusForm.created() : super.created();

        void updateModel(Event e, var detail, Node target)
        {
          //maritalStatus.status = (e.target as InputElement).value;

          //print( encode( maritalStatus ) );

        }


        void submit ( Event e, var detail, Node target )
        {
          $['form'].onSubmit.listen( ( e )
              {
                e.preventDefault();
              } );
        }

      }

    </script>
  </polymer-element>

To me this is just an HTML5 question that has almost nothing to do with Dart. So I'm going to change the tags. — Günter Zöchbauer, Dec 20 '13 at 12:57

score 1 · Answer 1 · answered Dec 28 '13 at 20:15

1

A simple solution to this problem is select a radio button by default. That way, the user can either stay with the default, or pick a different option. This, in effect, 'requires' a group of radio buttons.

answered Dec 28 '13 at 20:15

Shailen Tuli

13,815
5
40
51

score 0 · Answer 2 · answered Aug 12 '14 at 09:47

From a html point of view, you can add the 'required' attribute to one of the radio inputs in the group and it will require one of the options to be selected.

<input id='marriedRdo'
             name='status'
             type="radio"
             value='Married'
             on-click='{{submit}}'
             required="required">

See this fiddle for a demo: http://jsfiddle.net/lickmydesign/5y4Lv6gc/

How to indicate that a group of radio buttons are required

2 Answers2