angularjs check box validation

Question

I have 2 check boxes used like this

 <div class="group">
                        <label>Message to:</label>
                        <span class="checkbox-group">
                            <input type="checkbox"   name="mobile" ng-model="formData.mobile" />
                            <label for="mobile">Mobile</label>

                        </span>
                        <span class="checkbox-group">
                            <input type="checkbox"    name="email" ng-model="formData.email" />
                            <label for="email">Email</label>

                        </span>
                    </div>

i want to show a error message if atleast one of these checkboxes are not checked. i want to show the error message only after i press my submit button. How can i do this?

possible duplicate of [Form validation - Required one of many in a group](http://stackoverflow.com/questions/24227903/form-validation-required-one-of-many-in-a-group) — Julien, Apr 17 '15 at 09:52

Reena · Answer 1 · 2015-04-17T10:54:04.593

You can create directive in this way and use it

app.directive('checkRequired', function(){
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function (scope, element, attrs, ngModel) {
      ngModel.$validators.checkRequired = function (modelValue, viewValue) {
        var value = modelValue || viewValue;
        var match = scope.$eval(attrs.ngTrueValue) || true;
        return value && match === value;
      };
    }
  }; 
});

OR UPDATED: USE required attribute

 <div class="group">
                        <label>Message to:</label>
                        <span class="checkbox-group">
                            <input type="checkbox"   name="mobile" ng-model="formData.mobile" />
                            <label for="mobile">Mobile</label>

                        </span>
                        <span class="checkbox-group">
                            <input type="checkbox"    name="email" ng-model="formData.email" />
                            <label for="email">Email</label>

                        </span>
                    </div>

 <div ng-show="!isCheckboxChecked() && buttonClicked">Please select the Checkbox before submit</div>

// YOUR BUTTON HERE

you should set some random variable name to true in the function which will be called on form submit. Like

   $scope.buttonClicked = true;

OR: UPDATED:

$scope.isCheckboxChecked = function() {
return ($scope.formData.mobile|| $scope.formData.email);

}

this does not show any error messages right? I want to show a error message on submit — CraZyDroiD, Apr 17 '15 at 10:09
@CraZyDroiD see the updated code, don't need to use directive — Reena, Apr 17 '15 at 10:24
This is only for one check box right? what happens if i check the other check box and submit.? — CraZyDroiD, Apr 17 '15 at 10:43

score 0 · Answer 2 · answered Apr 17 '15 at 10:51

Use can use a form and a button as given below. So on submit, I'm triggering a validate() function.

<div data-ng-controller="myController">
    <form data-ng-submit="validate()">

                <label>Message to:</label>
                <span class="checkbox-group">
                <input type="checkbox" name="mobile" data-ng-model="formData.mobile" />
                 <label for="mobile">Mobile</label>
                 </span>
                 <span class="checkbox-group">
                 <input type="checkbox"    name="email" data-ng-model="formData.email" />
                 <label for="email">Email</label>
                 </span>

        <input type="submit" value="Submit" />
    </form>
</div>

And your controller:

function myController( $scope ){
    $scope.formData = {
        mobile : false, //initialize them to false, since by default they are undefined
        email : false       
    }
    $scope.validate = function(){
        if($scope.formData.mobile == false || $scope.formData.email == false)
        {
            alert('You\'ve not checked \'em all!')
        }
        else{
            alert('You\'ve checked \'em all!')
        }
    }
}

Please find the working example here

If you check both the checkboxes, you'll get an alert 'You've checked em all!' and if atleast one of them is not checked, you'll get the error message 'You've not checked 'em all'. I've tested and posted fiddle example. — FlashyFuddyFuddy, Apr 17 '15 at 11:01

angularjs check box validation

2 Answers2