validate the custom checkbox in angularjs

Question

hi i am trying to validate custom checkbox but it is not working. what i want to acquire when the checkbox is unchecked and i submit the data by clicking on send button there will show a error message, like other fields. and when i checked the checkbox the error message should be disappear...

here is the code Link https://jsfiddle.net/epn9s55x/

Html

  <div class="form-row">
            <div class="privacy-container">
                    <input type="checkbox" id="check1">
                <label class="privacy-text" for="check1">If you are bussiness to bussiness (B2B) customer,tick the box</label>
            </div>
           <div class="privacy-container sumsung-privacy">
               <input type="checkbox" id="check2">
               <label class="privacy-text" for="check2">I acknowladge my information will be processed in accordance with the <a href="#">Sumsung Privacy Policy</a></label>
            </div>

    </div>

js

var myApp = angular.module('myApp', []);
myApp.directive('match', function($parse) {

    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            scope.$watch(function() {
                return $parse(attrs.match)(scope) === ctrl.$modelValue;
            }, function(currentValue) {
                console.log("mismatched directive");
                ctrl.$setValidity('mismatch', currentValue);
            });
        }
    };
});
myApp.controller("myController", ['$scope', '$location','$anchorScroll',function($scope,$location, $anchorScroll){
    $scope.showMsgs = false;
   $scope.send = function(form){
       if ($scope[form].$valid) {
           $scope.showMsgs = false;
       } else {
           $scope.showMsgs = true;
           $location.hash('mainContainer');
           $anchorScroll();

       }
   }
}]);

Css

/*css for check box*/
        [type="checkbox"]:not(:checked),
        [type="checkbox"]:checked {
            position: absolute;
        }
        [type="checkbox"]:not(:checked) + label,
        [type="checkbox"]:checked + label {
            position: relative;
            padding-left: 2.75em;
            cursor: pointer;
            min-width: 300px;
            width: 95%;
            box-sizing: border-box;
            font-size: 14px;
            display: block;
            font-weight: bold
        }

        /* checkbox aspect */
        [type="checkbox"]:not(:checked) + label:before,
        [type="checkbox"]:checked + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 1.35em;
            height: 1.35em;
            border: 2px solid #000;
            background: #fff;


        }
        /* checked mark aspect */
        [type="checkbox"]:not(:checked) + label:after,
        [type="checkbox"]:checked + label:after {
            content: "";
            position: absolute;
            top: .18em;
            left: .18em;
            font-size: 1.3em;
            line-height: 0.8;
            color: #09ad7e;
            width: .86em;
            height: .86em;
            background: #000;
            transition: all .2s;
        }
        /* checked mark aspect changes */
        [type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        /*End of css of check boxes*/

Rani Radcliff · Accepted Answer · 2017-04-06 13:22:16Z

1

You could just put a model on your checkbox and and test for the value:

               <input type="checkbox" id="check2" ng-model="checkbox2">
           <label class="privacy-text" for="check2">I acknowladge my information will be processed in accordance with the <a href="#">Sumsung Privacy Policy</a></label>
        </div>

    </div>
    <div ng-show="!checkbox2">
    This is required
    </div>

Here is an update to your fiddle

Here's an update per your comment:

You can still use ng-model to do that. Just use a different $scope variable like this:

In your HTML:

        <div ng-show="checkInvalid">
    This is required
    </div>

In your Controller on your click event:

   $scope.checkInvalid = true;

Here is an updated Fiddle. Happy coding!

edited Apr 6, 2017 at 13:22

answered Apr 5, 2017 at 14:02

Rani Radcliff

5,0965 gold badges39 silver badges64 bronze badges

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

1 Comment

Mujtaba Hussain Bhat Over a year ago

but i want to hide the message first. if i click on send button with out checking the checkbox then the message should appear and if both checkboxes are checked then message should disappear.

Collectives™ on Stack Overflow

validate the custom checkbox in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related