CODEWITHSUNDEEP
angularjsvalidationcheckbox
gawellus
gawellus

Reputation: 61

Validate checkbox that which are required

I'd like to create terms and conditions form in my angularjs project.

From multiple checkboxes only several are required, and I'd like to enable submit button, only when all required checkboxes are checked.

Here is my checkboxes:

<label class="agreement-label control-label required">Zgoda</label>
<input class="agreements ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" id="agreement_1" name="agreement" required="" ng-model="client.agreement[0]" type="checkbox">

<label class="agreement-label control-label">Zgoda 2</label>
<input class="agreements ng-pristine ng-untouched ng-valid ng-not-empty" id="agreement_2" name="agreement" ng-model="client.agreement[1]" type="checkbox">

<label class="agreement-label control-label">Zgoda 4</label>
<input class="agreements ng-pristine ng-untouched ng-valid ng-not-empty" id="agreement_5" name="agreement" ng-model="client.agreement[4]" type="checkbox">

<label class="agreement-label control-label required">Zgoda 5</label>
<input class="agreements ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" id="agreement_6" name="agreement" required="" ng-model="client.agreement[5]" type="checkbox">

<button class="btn btn-success" id="ticketFormSubmit" ng-disabled="isAgreementsInvalid()" ng-click="changeButtonValue()" type="submit" disabled="disabled">Zapisz</button>

And in my angular controller:

$scope.isAgreementsInvalid = function() {
    return $scope.ticketForm.agreement.$invalid;
}

The problem is, only last required checkbox is validating.

Upvotes: 0

Views: 827

Answers (2)

rrd
rrd

Reputation: 5957

You could achieve this slightly more succinctly by using some():

$scope.isAgreementsInvalid = function() {
  return $scope.ticketForm.agreement.some((item) => item.$invalid);
}

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

You could do like this, but ng-init is necessary for this solution. name will not be required for this solution.:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.isAllChecked = false;
  $scope.checkValid = function() {
    $scope.isAllChecked = true
    angular.forEach($scope.client.agreement, function(value) {
      if (!value) {
        $scope.isAllChecked = false;
      }
    })
  }
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="ticketForm">
      <label class="agreement-label control-label required">Zgoda</label>
      <input ng-init="client.agreement[0] = false;" class="agreements" id="agreement_1" required ng-model="client.agreement[0]" type="checkbox" ng-click="checkValid()">

      <label class="agreement-label control-label">Zgoda 2</label>
      <input ng-init="client.agreement[1] = false;" class="agreements" id="agreement_2" required ng-model="client.agreement[1]" type="checkbox" ng-click="checkValid()">


      <button class="btn btn-success" id="ticketFormSubmit" ng-disabled="!isAllChecked" ng-click="submitFunction()" type="submit" disabled="disabled">Zapisz</button>
    </form>
  </div>

Upvotes: 1

Related Questions