Validate if there is a selected checkbox AngularJS

Question

Validate if there is a selected checkbox AngularJS

Navigation

#1 by (1 votes)

1

Good morning, I have a problem that I do not know how to do. I have a form with a checkbox list and I have to validate that there is at least one selected.

the form is this:

<form id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Health & Beauty</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Science & Nature</label>
        </div>

        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Crafts & Hobbies</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">History</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Sports & Fitness</label>
        </div>
        <span class="error" ng-show="formDetails.topic.$error.required">Please select at least one topic</span>
    </div>
    <div>
        <button type="submit" class="btn btn-danger">Sign Up</button>
    </div>
</form>

If none is selected, the message should appear and if at least 1 checkbox is selected, the message should be hidden.

How could I do the function to validate if there is one selected? I know how to validate the checkbox one by one, but not in this way.

thank you very much

html5 angularjs

asked by derek 06.09.2017 в 23:53

source

1 answer

How to find an object by a key (ej id) inside a multidimensional array? How to make a function return a value in visual basic?

score 1 · Accepted Answer

You can use plane jquery without using angle. You only look for the checkboxes that are checked :

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

$scope.error = false; 
  
  $scope.sendForm = function()
  {
    if($("#formDetails input[type=checkbox]:checked").length > 0) {
     alert("enviar form");
$scope.error = true; 
     }
     else{
       alert("no enviar form");
$scope.error = false; 
     }
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form ng-app="app" ng-controller="ctrl" id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Health & Beauty</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Science & Nature</label>
        </div>

        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Crafts & Hobbies</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">History</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Sports & Fitness</label>
        </div>
        <span class="error" ng-show="error">Please select at least one topic</span>
    </div>
    <div>
        <button type="submit" class="btn btn-danger">Sign Up</button>
    </div>
</form>