Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make selecting a radio button required before submitting

I have a series of questions which have radio answer choices. I can't figure out how to use AngularJS validation to require the user to select one before clicking "Next". Below is my code:

EDIT: Please note that clicking "Next" gets the next question node from the controller depending on what choice was made. It's basically a dynamic questionnaire.

<form novalidate>
   <div class="radio" ng-repeat="answer in node.Answers">
      <input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer" 
         value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}} 
   </div>
   <div>
      <input type="button" ng-click="previous()" value="Previous"/>
      <input type="button" ng-click="next(selectedAnswer)" value="Next"/>
   </div>
</form>
like image 952
Riz Avatar asked May 27 '13 16:05

Riz


People also ask

How do I make only one radio button checked in HTML?

Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.


2 Answers

Look below, using ng-show to display an error message should neither radio button be clicked.

                          <label for="dateofbirth">
                            <span>Are you the primary cardholder?</span>
                            </label>
                            <ul>
                              <li>
                                <label for="yes">
                                  <input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/>
                                  Yes
                                </label>
                              </li>
                              <li>
                                <label for="no">
                                  <input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/>
                                  No
                                </label>
                              </li>
                            </ul>
                        </fieldset>
                        <span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span>
like image 106
arush436 Avatar answered Sep 28 '22 03:09

arush436


EDIT: Here is a working fiddle

First give the form a name so that you can refer to it:

<form name="myForm" novalidate>

Next add the required attribute to the radio button:

<input type="radio" name="answerGroup" required
    ng-model="$parent.selectedAnswer"
    value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>

Then use ng-disabled to bind your next button's disabled property to the validity of the radio button:

<input type="button" ng-click="next(selectedAnswer)" value="Next"
    ng-disabled="myform.answerGroup.$invalid" />
like image 27
Dan Avatar answered Sep 28 '22 04:09

Dan