I have a group of checkboxes named "list[]". I want to validate that at least one is checked. How can I do this?
In the interests of reusability, it's a good practice to avoid hard-coding element names into functions. Here the checkOne function can be installed for any form and group of checkboxes or radio buttons.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Check at least one checkbox or radio button</title>
</head>
<body>
<form id='f1' method='post' action=''>
<p>
<input type='checkbox' name='list[]'><br>
<input type='checkbox' name='list[]'><br>
<input type='checkbox' name='list[]'><br>
<input type='checkbox' name='list[]'><br>
<input type='checkbox' name='list[]'><br>
<input type='submit'>
</form>
<script type='text/javascript'>
document.getElementById( 'f1' ).onsubmit = function()
{
return oneChecked( this[ 'list[]' ], 'Check at least one box' );
}
function oneChecked( group, msg ) /* Check for one selected in a group of checkboxes or radio buttons */
{
var ticked = !group.length && group.checked;
for( var i = 0, len = group.length; i < len & !ticked; i++ )
ticked = group[ i ].checked;
if( !ticked && msg )
alert( msg );
return ticked;
}
</script>
</body>
</html>
If there is only one element, the length property does not exist and ticked signifies the single element's state.
If there is only one element, the loop is not needed and must not iterate. length being undefined is treated as false and therefore not < 0.
The test may be better written like this:
Code:
for( var i = 0, len = group.length || 0; !ticked && i < len; i++ )
...
<script type="text/javascript">
function validateForm(){
isCheckboxTicked = false;
txtBoxes = document.getElementById('fld1').getElementsByTagName('input');
for(i=0; i < txtBoxes.length; i++){
if(txtBoxes[i].checked) {
isCheckboxTicked = true;
i = txtBoxes.length;
}
}
if(!isCheckboxTicked) {
alert('Please select at least 1 checkbox');
}
return isCheckboxTicked;
}
</script>
That function does an excellent job provided that it only has to act on a group of more than one inputs all of which have the same name, and all of which are contained in a fieldset with id "fld1".
That function does an excellent job provided that it only has to act on a group of more than one inputs all of which have the same name, and all of which are contained in a fieldset with id "fld1".
Not true.
Did you actually run the code before posting because you don't seem to understand how the function works just by reading the code?
The function works even if there is only 1 checkbox in the fieldset.
Did you actually run the code before posting because you don't seem to understand how the function works just by reading the code?
The function works even if there is only 1 checkbox in the fieldset.
Yes I missed that aspect, but the hazard with that technique is that if someone adds to that fieldset's markup, the collection could inadvertently pick-up unrelated input elements.
My point is that functions should be coded to be reusable and not committed by hard-coded identifiers.
Yes I missed that aspect, but the hazard with that technique is that if someone adds to that fieldset's markup, the collection could inadvertently pick-up unrelated input elements.
My point is that functions should be coded to be reusable and not committed by hard-coded identifiers.
Normally I would use the getElementsByClassName() I posted so additional inputs would not be picked up.
Reply With Quote
Originally Posted by tracy50
Bookmarks