Which would yo...">

Clever Geek Handbook

At least select one checkbox in validation form using angularjs

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 a validation message that shows at least one checkbox, how can I do this

found a solution for 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

I am currently using

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


source to share


4 answers


I think the solution to your problem is:



<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>
Run codeHide result


+1


source


You can use ngRequired

. 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 a 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>
0


source


Have you tried at the bottom?

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

Use this with dirty $ if you want to show the message after the form has been submitted.

0


source


write the required attributes in the input tag to display msg

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


source






More articles:


All Articles