Trying to validate that at least one checkbox is checked angularJS

Question

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.

Vohid Karimov · Accepted Answer · 2017-03-07 18:43:15Z

2

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

edited Mar 7, 2017 at 18:43

answered Mar 7, 2017 at 18:31

Vohid Karimov

5495 silver badges10 bronze badges

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

2 Comments

AndrewG Over a year ago

Thanks for the help, I like the solution! Both are of these answers have been valuable.

Sing Over a year ago

type="number" is important

Sachila Ranawaka · Accepted Answer · 2017-03-07 17:51:39Z

0

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 
}

edited Mar 7, 2017 at 17:51

answered Mar 7, 2017 at 17:44

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

AndrewG Over a year ago

That's fair, but what about forcing the user to stay on the same page, the button directs to the next page of the form, I want them to continue to stay on the page tell the valueStatus.length is not just 0.

Collectives™ on Stack Overflow

Trying to validate that at least one checkbox is checked angularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related