Validation using AngularJS

Question

I would really appreciate your help. Am using AngularJS to render questions in a quiz in the manner below:

<form name="form1" ng-controller="quizController" ng-submit="submit()">
    <div class="form-group">
        <span class="col-xs-3">What is your favorite color?</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

ng-required is enforcing the requirement that one of the option must be selected. When no option is selected and the user clicks the submit button, all the options are highlighted in red and the text You must choose an option appears next to the first option. I would like to tweak this behaviour such that when no option is selected, it is the question text that appears in red. Thanks for your assistance

cubbuk · Accepted Answer · 2015-08-25 15:29:28Z

2

Here is an example to show how you can do it. Basically you need to use $submitted and $invalid properties of FormController of AngularJS. Take a look at them here: https://docs.angularjs.org/api/ng/type/form.FormController

I used bootstrap's has-error class to highlight the question, if the color is not selected and the form is submitted the question will be highlighted red. I added novalidate attribute to disable html5 validation and used only angular's validations.

angular.module("myApp", []).controller("quizController", function($scope) {
  $scope.submit = function() {
    console.log("oley");
  }
})

.has-error {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp">
  <form name="form1" ng-controller="quizController" ng-submit="submit()" novalidate>
    <div class="form-group">
      <span class="col-xs-3" ng-class="{'has-error' : form1.color.$invalid && form1.$submitted}">What is your favorite color?</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </form>
</div>

edited Aug 25, 2015 at 15:29

answered Aug 25, 2015 at 13:50

cubbuk

7,9284 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Gathogo Over a year ago

Thanks @cubbuk. Just wondering, is there a class equivalent to 'bg-danger' that would allow me to change the fore color (i.e. text color) instead of the background?

cubbuk Over a year ago

You are welcome @JohnGathogo. You can try out has-error. If that does not work, you can create a similar style as following: .has-error{color: red}

wero · Accepted Answer · 2015-08-25 13:54:46Z

0

Here is a solution based on CSS.

You could wrap all radio texts into an own span:

<span>
   <input type="radio" name="color" ng-model="color" ng-required="true"  value="Red" />
   <span>Red<span>
</span>
....

and then use the following selector to set the text-color of these spans to red if the radio button is invalid (because its value is missing):

input[type=radio]:invalid + span { color: red; }

Besides I think you only need to place the ng-required attribute only on one radio button (and if its is constant you could replace it by a simple required).

answered Aug 25, 2015 at 13:54

wero

33.1k3 gold badges63 silver badges87 bronze badges

Collectives™ on Stack Overflow

Validation using AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related