2

I'm trying to validate a group of checkboxes where at least one is required. This is the HTML of my checkboxes:

<fieldset class="requiredcheckboxgroup">
    <legend>How did you come into contact with VK?*</legend>
    <input ng-model="application.contact.relations" group-required required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br>
    <input ng-model="application.contact.employees" group-required required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br>
        <input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled />
    <input ng-model="application.contact.jobad" group-required required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad<br>
    <input ng-model="application.contact.website" group-required required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website<br>
    <input ng-model="application.contact.other" group-required required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other<br>
</fieldset>

As you can see all of my checkboxes have the required attribute and the group-required attribute. I have a directive like this:

angular.module('dxs-vkgroupApp').directive('groupRequired', group_required);

function group_required() {
    return  {
        restrict: 'A',
        link: function(scope, element, attr) {
            var requiredCheckboxes = jQuery('.requiredcheckboxgroup :checkbox[required]');

            requiredCheckboxes.change(function(){
                if(requiredCheckboxes.is(':checked')) {
                    requiredCheckboxes.removeAttr('required');
                }

                else {
                    requiredCheckboxes.attr('required', 'required');
                }
            });
        }
    };
}

The problem is that they all have to be selected before the form is valid... . The required attribute is correctly removed when one is selected but when I try to submit the form he still isn't valid.

How could I fix this? Or is there a better way to solve this?

2

2 Answers 2

3

You can try creating a function that determines if any checkbox has been selected:

 angular('module').controller('MyController', function(){
    this.application = { contact: {} };

    this.noneSelected = function () {
      return !(application.contact.relations || application.contact.employees) /* ... */; 
    }
}

And then on your html:

<div ng-controller="MyController as ctrl">
<fieldset class="requiredcheckboxgroup">
    <legend>How did you come into contact with VK?*</legend>
    <input ng-model="ctrl.application.contact.relations" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br>
    <input ng-model="ctrl.application.contact.employees" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br>
        <!-- .... -->
</fieldset>
</div>
3
  • What about the directive you're referring to (contact-employees)? Should I use that also?
    – nielsv
    Jun 9, 2015 at 9:33
  • I copied it from your code, don't know what that directive does
    – Joao Leal
    Jun 9, 2015 at 9:38
  • that would be in your controller
    – Joao Leal
    Jun 9, 2015 at 10:08
0

The directive should bind the change event. This is how it should be

<fieldset class="requiredcheckboxgroup">
    <legend>How did you come into contact with VK?*</legend>
    <input ng-model="application.contact.relations" ng-required="selected" group-required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations
    <br>
    <input ng-model="application.contact.employees" ng-required="selected" group-required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees
    <br>
    <input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled />
    <input ng-model="application.contact.jobad" ng-required="selected" group-required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad
    <br>
    <input ng-model="application.contact.website" ng-required="selected" group-required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website
    <br>
    <input ng-model="application.contact.other" ng-required="selected" group-required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other
    <br>
</fieldset>

The directive should be

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

app.controller('testCtrl', ['$scope', function($scope) {

        $scope.selected = true;

    }]);

    app.directive('groupRequired', group_required);

    function group_required() {
        return  {
            restrict: 'A',
            link: function(scope, element, attr) {                    
                element.bind("change", function(){
                    var requiredCheckboxes = jQuery('.requiredcheckboxgroup input:checked').length;                        
                    if(requiredCheckboxes > 0)
                        scope.selected = false;
                    else
                        scope.selected = true;
                    scope.$apply();
                })
            }
        };
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.