validate angular checkboxJS

Question

validate angular checkboxJS

Navigation

#1 by (0 votes)

0

In relation to a question I asked yesterday Validate if there is a checkbox selected AngularJS

As I said yesterday, I have a checkbox list and I had to see if at least one was selected, but another problem has arisen, since with the function that, validates all the checkboxes of the form and of course now that I finished the form, I had to add 2 checkboxes plus one for the privacy policy and another one for the age of majority, which must have a separate validation, one for the age checkbox and another for privacy.

    <form id="formDetails" name="formDetails" ng-submit="sendForm()">
        <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" name="topic" id="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" name="topic" id="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" name="topic" id="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" name="topic" id="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" name="topic" id="topic">Sports & Fitness</label>
            </div>
            <span class="error" ng-show="formDetails.topic.$error.required">Please select at least one topic</span>
        </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>

I tried to modify the function that happened to me by modifying the input[type=checkbox]:checked" by input[id=age]:checked" or the corresponding id of the checkboxes but it does not work properly since only the checkbox of the privacy policy can be checked which already validates all the checkbox but if only that one is missing, the error message appears in all the checkboxes.

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; 
        }
    }
});

How could I do it so that when I give the button validate the checkboxes, from the list id=topic on the one hand, the checkbox of the age on the other id=age and the one on the privacy policy on the other id=terms

Thanks

html5 angularjs

asked by derek 07.09.2017 в 15:13

source

1 answer

mod_evasive blocks my server's ip always What is the Visual Basic Group Join for?

score 0 · Accepted Answer

The code can be simplified just by looking for each checkbox and checking if they are checked. In the case of the checkbox topic, only those with the name="topic" should be searched and at least 1 checked. In the case of age and terms, you only have to check if they are checked with the is() method of jquery:

var app = angular.module('app', []);

    app.controller('ctrl', function ($scope) {
    
    $scope.form = {
      ageError: false,
      policyError: false,
      topicError: false,
      isValid:function(){
        return this.ageError && this.topicError && this.policyError;
      }
    };

    $scope.sendForm = function()
    {
      $scope.form.topicError = $("input[name=topic]:checked").length == 0;
      $scope.form.ageError = !$("#age").is(":checked");
      $scope.form.policyError = !$("#terms").is(":checked");
      
      return $scope.form.isValid();
    }
});

.error{
font-style:italic;
font-size:13px;
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form ng-app="app" ng-controller="ctrl" id="formDetails" name="formDetails" ng-submit="sendForm()">
        <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" name="topic" id="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" name="topic" id="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" name="topic" id="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" name="topic" id="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" name="topic" id="topic">Sports & Fitness</label>
            </div>
            <span class="error" ng-show="form.topicError">Please select at least one topic</span>
        </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" id="age" name="age">I can confirm I am over 16 years of age
                  <span class="error" ng-show="form.ageError">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" id="terms" name="terms">I agree to the terms of the Privacy Policy
                  <span class="error" ng-show="form.policyError">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>