3

trying to add form validators for the checkbox in my form, in case if it's unchecked the form will have ng-invalid.

<li class="terms_checkbox"><input type="checkbox" id="checkbox_terms" name="terms" /><label for="checkbox_terms"></label></li>
<li class="accept">I have read and accept the terms and conditions</li>

any advise on what can trigger the addition of ng-invalid to the form if it's unchecked and vice versa for the class removal.

PSL
  • 123,204
  • 21
  • 253
  • 243
user2727195
  • 7,122
  • 17
  • 70
  • 118

2 Answers2

8

All you need to do is to add required attribute and ng-model on the checkbox to make it necessary to check during form validation.

<li class="terms_checkbox">
   <input type="checkbox" 
       id="checkbox_terms" name="terms" ng-model="agreement" required />
   <label for="checkbox_terms"></label>
</li>


angular.module('app', []).controller('ctrl', function($scope) {

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="form" novalidate>
    <ul>
      <li class="terms_checkbox">
        <input type="checkbox" id="checkbox_terms" name="terms" ng-model="agreement" required />
        <label for="checkbox_terms"></label>
      </li>
      <li class="accept">I have read and accept the terms and conditions</li>
      <li>
        <button ng-disabled="form.$invalid">Submit</button>
      </li>
    </ul>
  </form>
</div>
PSL
  • 123,204
  • 21
  • 253
  • 243
  • can we please associated some kind of visual cue through css that button is disabled, I'm using a background image for the ` – user2727195 Jan 20 '15 at 19:45
  • 1
    sure you can do that through css. ex:- `form.ng-invalid .yourbuttonselector{//provide rule here}` – PSL Jan 20 '15 at 20:12
1

Well, for starters, this isn't a form. If you want to keep this structure, you can simple apply a model on the checkbox, and place an "invalid" property conditionally depending on the value of $scope.checked, like so:

<ul>
  <li class="terms_checkbox">
    <input ng-model="checked" type="checkbox" id="checkbox_terms" name="terms" />
    <label for="checkbox_terms"></label>
  </li>
  <li class="accept">I have read and accept the terms and conditions</li>
</ul>

However, I would recommend surrounding it inside an actual form, and placing the required attribute on the checkbox. This :

<form name="myForm">
  <ul>
    <li class="terms_checkbox">
      <input type="checkbox" id="checkbox_terms" name="terms" required />
      <label for="checkbox_terms"></label>
    </li>
    <li class="accept">I have read and accept the terms and conditions</li>
  </ul>
</form>

Now, If you check the $scope.myForm.$invalid property, it will let you know whether the form has been validated.

rageandqq
  • 2,221
  • 18
  • 24
  • `li` should nt be nested inside a form directly. – PSL Jan 20 '15 at 19:28
  • Why can't it work? Assuming a submit button is added, i should be fine. – rageandqq Jan 20 '15 at 19:31
  • Oh, I just assumed that the user wanted to keep the same structure. Agreed, there are definitely other alternatives. – rageandqq Jan 20 '15 at 19:31
  • Adding an `li` inside a form or anything other than ul or ol is _Invalid Html_ I am not saying that it wont work, i said it is invalid html.. :) – PSL Jan 20 '15 at 19:31
  • Right, I fixed it to ad the elements to an unordered list. Missed that, but then again the original user's example would be invalid too! – rageandqq Jan 20 '15 at 19:35
  • OP might have shown us only a part of it. :) Do you even see a form? You may also have to add novalidate on the form to prevent native validation. See my demo code. – PSL Jan 20 '15 at 19:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69246/discussion-between-rageandqq-and-psl). – rageandqq Jan 20 '15 at 19:36