validation checkbox using AngularJS

Question

I have one form but when I try to validate the checkbox I have one problem, because are differents validations, one validation is one list you have to check one of them and then at the end of the form I got 2 check boxes more one to the privacy policy and other if you are 16 year age, but the validation what I have checked all the check box of the form and does not distinguish if it is from the list or if it is another check box

Form:

<form id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div>
        <p><strong>Select areas of interest:*</strong></p>
    </div>
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Health & Beauty</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Science & Nature</label>
         </div>

         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Crafts & Hobbies</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">History</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Sports & Fitness</label>
          </div>
      </div>
      <div class="col-xs-12 col-md-12 policy">
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info check-policy">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="age" id="age" name="age">I can confirm I am over 16 years of age
                  <span class="error" ng-show="error">Please confirm you are over 16</span>
              </label>

          </div>
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
                  <span class="error" ng-show="error">Please agree to the terms of the Privacy Policy</span>
              </label>
           </div>
       </div>
       <div>
           <button type="submit" class="btn btn-danger">Sign Up</button>
       </div>
   </form>

JS

var app = angular.module('formApp', []);
    app.controller('formCtrl', function ($scope) {

    $scope.error = false; 

    $scope.sendForm = function()
    {
        if($("#formDetails input[id=topic]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=age]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=terms]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }
    }
});

At the beginning I tried to do this using input[type=checkbox]:checked but like this validated all the checkbox in the form.

How can I do the validations if is id="topic"make one validation, if id="age" another one and if is id="term" another and if are no checked show the message.

MrWook · Accepted Answer · 2017-09-07 11:51:48Z

1

You are using angularjs now so please stop thinking in jquery. It is not necessary to use jquery here. The boolean is inside the model that you define on the html element like:

ng-model="age"

So you can access the boolean value of the checkbox age with:

$scope.age

If you want to use multiple error messages you can use an object instead of boolean value like:

if($scope.age == true) {
    $scope.error.age = true; 
}else{
    $scope.error.age = false
}

or you just use the model inside the ng-show

<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
  <label class="checkbox-inline">
      <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
      <span class="error" ng-show="terms">Please agree to the terms of the Privacy Policy</span>
  </label>
</div>

answered Sep 7, 2017 at 11:51

MrWook

3483 silver badges11 bronze badges

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

1 Comment

derek Over a year ago

I'm trying to do this but doesn't work good, I try to change the function but when I the age or terms are checked show the messege but it's the other way and I want to show the messege when I click the button submit, and the other thing is validation what I tried to do is first to watch if one checkbox of id="topic" was checked or not if anyone are checked show the messege and then the validation of the age and terms, if age is not checked show the messege and the same with the terms. I do not know if I explained well

Nikita · Accepted Answer · 2017-09-07 12:24:21Z

0

Try this. Hope it will help you.

ng-submit="sendForm(formDetails.$valid)"
$scope.sendForm = function()
    {
        if (!status) {
            return false;
        }else{
           //code here
        }
    }

answered Sep 7, 2017 at 12:24

Nikita

4372 silver badges12 bronze badges

Collectives™ on Stack Overflow

validation checkbox using AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related