I've been trying to get a checkbox validation working, I have tried several scripts and am coming into problems.

I want to make sure at least 1 and a maximum of 3 checkboxes from a group are selected.

The name of the checkboxes is r_genre[] and it has to be kept that way.

I think the square brackets at the end are causing the problem, as they are shown in blue in dreamweaver as opose to black as the rest of the text is.

Is there a way of including the brackets without causing a problem?

TIA
Simon

Hi Simon,

The script Here might be to your liking. Really good script source in general.

I actually managed to find that one, unfortunatly it won't work either. I'm not sure if it's the square brackets or the fact that I hav other javascripts on the page, however, the last one I tried worked without the brackets fine.

Unfortunatly I need these so the form processor knows that an array is being sent.

Thanks for the link though. I think this may have to be done server side.
Simon

You can avoid referencing by name in your JavaScript so you don't have an issue with your php referencing. Just use the elements array. This is an array of the form's elements, here's an example :

function validate()
{
result=0;
start=0; // start of checkbox group
end=4; // end of checkbox group
for(i=start;i<end;i++)
{
result += document.forms[0].elements[i].checked ? 1:0;
}
if(result>0 && result<4)
{
alert("Fine");
return true;
}
else
{
alert("Problem");
return false;
}
}

Thanks for that code. Can you please explain a little better what this actually does... Would I just stick that script in the head and call the function with 'onsubmit' of the form?

Sorry, I'm a novice.
Simon

Please delete

Sorry, I should have explained it better. I took it you might adapt it to your own needs.

Yes you do call it 'onsubmit' of the form so your opening form tag will need this :

onsubmit="return validate()"

The elements array allows the code to reference every element of the form, for example the first element in the form would be elements[0].

I have commented the script a little better below :

function validate()
{
result=0; // variable to hold number of ticked boxes, start with zero
start=0; // variable to hold position in form of first checkbox in group
end=4; // variable to hold position in form of last checkbox in group
for(i=start;i<end;i++)
{
// find if each box is checked, if it is add one to the result variable, else add zero
// if this is the only form then you can reference it as forms[0]
result += document.forms[0].elements[i].checked ? 1:0;
}
// check if result variable holds a valid number ( 1,2 or 3 )
if(result>0 && result<4)
{
alert("Fine");
return true; // form will be submitted
}
else
{
alert("Problem");
return false; // form will not be submitted
}
}

This approach can be developed further depending on the complexity of the form. For example, the elements array can be used to test the type attribute and act accordingly if you need to cycle through the entire form.

Here is what the form may look like, this would need no alterations to the validate() function above :

<form onsubmit="return validate()" method="post" action="somescript.tcl">
<input name="r_genre[]" type="checkbox">
<input name="r_genre[]" type="checkbox">
<input name="r_genre[]" type="checkbox">
<input name="r_genre[]" type="checkbox">
<input type="submit">
</form>