In relation to a question I asked yesterday Validate if there is a checkbox selected AngularJS
As I said yesterday, I have a list of checkboxes and I had to see if at least one was selected, but another problem has arisen, since with that function, it validates all the checkboxes of the form and of course now that I have finished the form, I have had to add 2 checkboxes plus one for the privacy policy and another for if you are of legal age, which must have a separate validation, one for the age checkbox and another for privacy
<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" id="topic" 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" id="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" id="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" id="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" id="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" id="topic">Sports & Fitness</label>
</div>
<span class="error" ng-show="formDetails.topic.$error.required">Please select at least one topic</span>
</div>
<div class="col-xs-12 col-md-12 policy">
<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info check-policy">
<label class="checkbox-inline">
<input type="checkbox" ng-model="age" id="age" name="age">I can confirm I am over 16 years of age
<span class="error" ng-show="error">Please confirm you are over 16</span>
</label>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
<label class="checkbox-inline">
<input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
<span class="error" ng-show="error">Please agree to the terms of the Privacy Policy</span>
</label>
</div>
</div>
<div>
<button type="submit" class="btn btn-danger">Sign Up</button>
</div>
</form>
I have tried to modify the function that was passed to me by modifying the input[type=checkbox]:checked"
by input[id=age]:checked"
or the corresponding id of the checkboxes but it does not work correctly since only the checkbox of the privacy policy can be marked, which already validates all the checkboxes but if only that one is missing, it appears the error message in all checkboxes.
JS
var app = angular.module('formApp', []);
app.controller('formCtrl', function ($scope) {
$scope.error = false;
$scope.sendForm = function()
{
if($("#formDetails input[id=topic]:checked").length > 0) {
$scope.error = false;
}
else{
$scope.error = true;
}
if($("#formDetails input[id=age]:checked").length > 0) {
$scope.error = false;
}
else{
$scope.error = true;
}
if($("#formDetails input[id=terms]:checked").length > 0) {
$scope.error = false;
}
else{
$scope.error = true;
}
}
});
How could I do it so that when I hit the button, it validates the checkboxes, from the list id=topic
on the one hand, the age checkbox on the other id=age
and the privacy policy checkbox on the other?id=terms
Thank you
The code can be simplified just by looking at each checkbox and checking if they are checked. In the case of topic checkboxes, all you have to do is search for all those with the name="topic" and at least 1 is checked. In the case of age and terms, it would only be necessary to verify if they are checked with the
is()
jquery method: