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.

Answer 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>

Answer 2

Try this. Hope it will help you.

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