Atleast select one check box in form validation using angularjs

Question

Here is my html

<form name="sales">
<div class="sale-type">
                            <p>Which would you like to sell?</p>
                            <fieldset class="md-form form-group">
                                <input ng-model="art.originalForSale" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2">
                                <label for="checkbox2">My Original ART</label>
                            </fieldset>

                            <fieldset class="md-form form-group">
                                <input ng-model="art.printForSale" name="printForSale" type="checkbox" class="filled-in" id="checkbox22">
                                <label for="checkbox22">Prints of my ART</label>
                            </fieldset>
                        </div>
<button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</form>

I want to display validation message that shows at least one check box required how can i do it

found a solution from this question How to require at least 1 checkbox for AngularJS Form Validation?

but it uses a script i want a solution without using scirpt

currently i am using

<span  ng-show="part1.originalForSale.$error.required" class="error">Checkbox required</span>

Carlos Franco · Accepted Answer · 2017-06-20 12:31:20Z

1

I think that solve your problem:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<ng-form name="sales" ng-app >
  <div class="sale-type">
    <p>Which would you like to sell?</p>
    <fieldset class="md-form form-group">
      <input ng-model="art.originalForSale"  value="cb1" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2" ng-required="!art.printForSale">
      <label for="checkbox2">My Original ART</label>
    </fieldset>

    <fieldset class="md-form form-group">
      <input ng-model="art.printForSale" value="cb2" name="printForSale" type="checkbox" class="filled-in" id="checkbox22" ng-required="!art.originalForSale">
      <label for="checkbox22">Prints of my ART</label>
    </fieldset>
  </div>
  <span  ng-show="sales.$invalid" class="error">Checkbox required</span>
  <button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</ng-form>

answered Jun 20, 2017 at 12:31

Carlos Franco

2102 silver badges9 bronze badges

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

2 Comments

Jabaa Over a year ago

Strange!! its not working the error message still showing

Carlos Franco Over a year ago

When I run the code, the message is showing only if the both checkbox is unmarked.

Burak Akyıldız · Accepted Answer · 2017-06-20 12:03:35Z

0

You can use ngRequired directive. There is a simple example.

<input name="checkbox1" type="checkbox" ng-model="isChecked1" ng-required="isChecked2">
<input name="checkbox2" type="checkbox" ng-model="isChecked2" ng-required="isChecked1">

You can use ngMessages for validation message

<div ng-messages="myForm.checkbox1.$error || myForm.checkbox2.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not select a checkbox !</div>
</div>

edited Jun 20, 2017 at 12:03

answered Jun 20, 2017 at 11:54

Burak Akyıldız

1,64216 silver badges26 bronze badges

4 Comments

Jabaa Over a year ago

It didn't worked always shows the error message even if checkbox checked

Jabaa Over a year ago

<span ng-show="part1.originalForSale.$invalid || part1.printForSale.$invalid" class="error">Atleast one checkbox required</span>

Burak Akyıldız Over a year ago

This is not what i wrote. Use same directives and $error variable.

Jabaa Over a year ago

Let us continue this discussion in chat.

Kenath · Accepted Answer · 2017-06-20 12:04:10Z

0

Have you tried below?

<span  ng-show="!(art.printForSale || art.originalForSale) " class="error">Checkbox required</span>

Use this with $dirty if you want to show the message after submit form.

answered Jun 20, 2017 at 12:04

Kenath

6306 silver badges13 bronze badges

Comments

Rahul · Accepted Answer · 2017-06-20 11:48:54Z

-1

write required attributes in input tag for showing msg

    <span ng-show="frmRegister.name.$dirty && frmRegister.name.$error.">this is req...</span>

answered Jun 20, 2017 at 11:48

Rahul

11 bronze badge

1 Comment

Jabaa Over a year ago

I need to check either one of the field

Collectives™ on Stack Overflow

Atleast select one check box in form validation using angularjs

4 Answers 4

2 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related