CODEWITHSUNDEEP
angularjsformsvalidation
AndrewG
AndrewG

Reputation: 145

Trying to validate that at least one checkbox is checked angularJS

Trying to figure out the best way to stay on the same page alerting the user if they have failed to check at least one checkbox.

HTML:

<div class="col3">
<input type="checkbox" ng-model="$parent.value5" ng-true-value="'Togetherness'" ng-false-value="">
<span class="checkboxtext">
    Togetherness
</span><br>
<!--<p>We value our people and recognize that <strong>Together</strong> we achieve superior results.</p><br>-->
<div class="col3">

    <a ui-sref="form.submit">
        <button name="button" ng-click="SaveValue()">Continue</button>
    </a>

Back-end angularJS to check if one of the boxes was checked-

$scope.SaveValue = function () {
    var valueStatus = [];
    if ($scope.value1 === "Methodical")
    {
        valueStatus.push($scope.value1);
    }
    if ($scope.value2 === "Relentless")
    {
        valueStatus.push($scope.value2);
    }
    if ($scope.value3 === "Togetherness")
    {
        valueStatus.push($scope.value3)
    }
    if ($scope.value4 === "Excellent") {
        valueStatus.push($scope.value4)
    }
    if ($scope.value5 === "Ingenious") {
        valueStatus.push($scope.value5)
    }
    return valueStatus
};

Basically I'm wanting to make an array of these values and then return it. However, I want the user to check at least one box. I've tried redirecting back to the page if valueStatus[0] == null. However, I don't think this is the best way to validate and it does not work completely how I think it ought to.

Upvotes: 2

Views: 4867

Answers (2)

Vohid Karimov
Vohid Karimov

Reputation: 549

The way I solve this is putting validation on the length of array (valueStatus in your case) with hidden number input. The input will have min validation on. So, if user fails to check at least one, the form is not submitted;

<input type="number" name="valueStatus" ng-model="valueStatus.length" min="1" style="display: none">

Then, you can use normal validation on valueStatus that is available on the form model

myFormName.valueStatus.$valid

This way, most of the logic is put into the template, which is called angularjs way ;)

UPDATE

Forgot to mention: You need to update the list of checked values on on-change checkbox event

<input type="checkbox" ng-model="checkboxValue1" on-change="updateValueStatus(checkboxValue1)">
<input type="checkbox" ng-model="checkboxValue2" on-change="updateValueStatus(checkboxValue2)">

and in controller

$scope.updateValueStatus = function(value){
  var indexOf = $scope.valueStatus.indexOf(value);
  if(indexOf < 0) {
     $scope.valueStatus.push(value);
  } else {
     $scope.valueStatus.splice(indexOf, 1);
  }
}

Hope it will help people with the same issue

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

simply just check the valueStatus length is equal to 0 or not 

$scope.SaveValue = function () {
    var valueStatus = [];
    if ($scope.value1 === "Methodical")
    {
        valueStatus.push($scope.value1);
    }
    if ($scope.value2 === "Relentless")
    {
        valueStatus.push($scope.value2);
    }
    if ($scope.value3 === "Togetherness")
    {
        valueStatus.push($scope.value3)
    }
    if ($scope.value4 === "Excellent") {
        valueStatus.push($scope.value4)
    }
    if ($scope.value5 === "Ingenious") {
        valueStatus.push($scope.value5)
    }


    if (valueStatus.length === 0 ) {
       console.log('please select atleast one select box')
    }
    return valueStatus
};

Edited

remove the ui-sref tag and change the state inside your click function 

<button name="button" ng-click="SaveValue()">Continue</button>

in the saveValue function add this 

if (valueStatus.length === 0 ) {
       console.log('please select atleast one select box')
}else{
    $state.go('form.submit') // if atleast one selected then the page will change 
}

Upvotes: 0

Related Questions