How do I use a required attribute for a checkbox group?
I have a group of checkboxes, of which at least one must be validated for the form to be submitted. To do this, I named each checkbox the same and set the attribute required
.
But this doesn't work:
<input name="mycheckgroup" type="checkbox" value="1" required />
<input name="mycheckgroup" type="checkbox" value="2" required />
<input name="mycheckgroup" type="checkbox" value="3" required />
I need to check all three fields to submit the form :-(
If it was switches, it worked ... But I want at least one or more boxes to be checked.
Can anyone please help?
source to share
As I didn't know, I need javascript for this solution. I didn't mark it, sorry.
But I need these to be checkboxes (no choice).
So here's my working solution using jQuery:
<script>
$('.myCB').click(function(){
if($('#cb1').is(':checked') || $('#cb2').is(':checked') || $('#cb3').is(':checked'))
$(".myCB").attr("required", false);
else
$(".myCB").attr("required", true);
});
</script>
<input name="mycheckgroup" id="cb1" type="checkbox" value="1" class="myCB" required />
<input name="mycheckgroup" id="cb2" type="checkbox" value="2" class="myCB" required />
<input name="mycheckgroup" id="cb3" type="checkbox" value="3" class="myCB" required />
Checking any checkbox will remove the required attribute from all checkboxes in that group.
source to share
Without the introduction of JavaScript, the most logical answer to this would be to change your control to an element select
(which is much more appropriate in your situation):
<select>
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
If this is not a good enough solution for you, you will have to handle the validation with JavaScript. I'm not going to suggest a solution here as you don't havejavascript and may already know how to do it anyway.
If you want to use the JavaScript approach, you should edit your question to ask for a possible JavaScript solution and include whatever libraries you use - although in the spirit of StackOverflow, you should try to solve this yourself.
No, sorry. I think you misunderstood. I need to check one or more checkboxes. - cypher75
In this case, you can give your element select
an attribute multiple
that allows you to select multiple options:
<select multiple required>
<option disabled>Select Multiple</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
I added the initial element option
, which is disabled
to attribute select
element required
has come into force.
source to share
This will work if you attach code in a form tag and validation is performed when the submit action is performed. And use jQuery to add html5 attribute dynamically.
HTML code
<form>
<input name="mycheckgroup" type="checkbox" value="1" />
<input name="mycheckgroup" type="checkbox" value="2" />
<input name="mycheckgroup" type="checkbox" value="3" />
<input type="submit" id="btnSubmit" value="submit" />
</form>
JQuery code
$("#btnSubmit").click(function(e){
if( $("input[name=mycheckgroup]:checked").length == 0){
$("input[name=mycheckgroup]:first").attr("required", "required");
}else{
$("input[name=mycheckgroup]").removeAttr("required");
$("form").submit();
}
});
source to share
Here's a great way I came across:
Read more: fooobar.com/questions/54990 / ...
Small snippet:
$cbx_group = $("input:checkbox[name='q-8']");
$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
$cbx_group.prop('required', false);
}
source to share