I have a problem that I have been seeking an answer for for a while now and can't get it to work.
I am searching for a way to check if atleast one checkbox in a group of checkboxes is checked. What makes it so difficult for me is that every one of these inputs have different name values. I found answers only for jQuery validation plugin etc. Here is my html:
<tr class="formField-checkbox formFieldRequired">
<td class="formLabelHolder"><label for="field129">Group of checkboxes</label></td>
<td class="formFieldHolder">
<input type="checkbox" name="field129[0]" class="formCheckbox required" value="Something1">
<label><span class="formCheckboxLabel">Something1</span></label>
<input type="checkbox" name="field129[1]" class="formCheckbox required" value="Something2">
<label><span class="formCheckboxLabel">Something2</span></label>
<input type="checkbox" name="field129[2]" class="formCheckbox required" value="Something3">
<label><span class="formCheckboxLabel">Something3</span></label>
</td>
</tr>
Here is my jQuery that I have now:
// Validate all checkboxes
var named = [];
var $requiredCheck = $(this).find('input[type="checkbox"].required');
$($requiredCheck,$formId).each(function() {
// Creates an array with the names of all the different checkbox group.
named[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in named) {
var $checkboxes = $("input[name='" + name + "']");
if ($checkboxes.filter(':checked').length == 0) {
$checkboxes.closest('.formFieldHolder').addClass('error').append('<span class="error">Required!</span>');
}
}
This obviously doesn't work perfectly at the moment because the checkboxes have different name values. Now the append prints out as many error messages as there are checkboxes. For example if there are five checkboxes and one is checked, it still gives the error message four times. I have tried to solve this on my own for so long but simply can't get it right. I can't change the name value of these checkboxes or quite simply do anything to the html. One way I figured this could be done is to remove the last [0], [1] and [2] parts in the names but I didn't find a way how I could get it to work.
I think simple jQuery validation methods will fail since there could be more checkbox groups than just one in a single form. The next group of checkboxes would have name value of name="field130[0]", name="field130[1]" and name="field130[2]". I think you get my point, hopefully.
Any help would be much appreciated.
EDIT:
Added the description that there could be more than one group of checkboxes in one form
There is a form with multiple checkboxes and we're going to make sure that at least one is checked using pure JavaScript. To set a custom validation error message, we will use setCustomValidity() method.
This way, when saving to db, the value will always be there, 0 or 1. $rules = [ 'checkbox1' => 'required_without_all:checkbox2,checkbox3', 'checkbox2' => 'required_without_all:checkbox1,checkbox3', 'checkbox3' => 'required_without_all:checkbox1,checkbox2', ];
How can I enforce that requirement? You could use PHP to check if at least 1 of the check boxes is checked. You would probably also want to make sure your <input "name"> is different for each check box otherwise getting the return variable values might be tricky.
You're making this way too complicated :)
if ($('.required:checked').length > 0) { // the "> 0" part is unnecessary, actually
[do something]
}
See the first example on the official jQuery API page for :checked.
In response to your comment
If you have multiple forms on the page, you can specify the form as a container:
if ($('#form1_id').find('.required:checked').length) {...
To test multiple forms
Give each form the class testable_form
.
$('.testable_form').each(function() {
if ($(this).find('.required:checked').length) {
[do something - set a flag, add a class...]
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With