checkbox field required not working

[halves]

I have a form with two check boxes which are required. Whether or not either check box is checked, the form is accepted. How do I correct this? I want at least one check box checked before the form can be submiited.

Thanx.

[Musawir Ali]

that does not fit into the checkbox logic. Checkboxes are supposed to be boolean responses: on or off. Having a checkbox as a "required" field makes no sense, since by not checking a checkbox, you are still answering the question. What you want is an "on" response for one of the checkboxes, which is different than saying you want the checkbox field to be required. Unfortunately, that logic is not generic enough to be a part of the form generator and I don't see any quick way of implementing that without modifying the generated code.

[halves]

Should I be using radio buttons instead then? Will they validate in the way I describe, i.e at least ONE of two buttons must be selected? Optionally, can I force one button to be selected by default?

Thanks for your time.

[TNTEverett]

Try the following.
Add this function to the top of your form.html file near the top where the other Javascript functions are located. 

      function validateCheckBox(fieldId, fieldBoxId, fieldType, required)
      {
        if(fieldType == 'checkbox') {
        fieldBox = document.getElementById(fieldBoxId);
        if(required == 1) {

         myfieldId = fieldId+"_option_1";
         fieldObj = document.getElementById(myfieldId);
          if(fieldObj.checked == 1)
          {

              myfieldId = fieldId+"_option_1";
              fieldObj = document.getElementById(myfieldId);
              fieldObj.setAttribute("class","mainForm");
              fieldObj.setAttribute("className","mainForm");

            return true;
          } else {
            fieldObj.setAttribute("class","mainFormError");
            fieldObj.setAttribute("className","mainFormError");
          }

        fieldObj.focus();
        return false;
       }
       }
      }

Then at the bottom of your form.html file make the following changes.  Assuming your check box varables are $field_1 and $field_2. 

if (validateCheckBox('field_1','fieldBox_1','checkbox',1) == false) {
  if (validateCheckBox('field_2','fieldBox_2','checkbox',1) == false) {
retVal=false;
}
}
If both are not checked this should prevent the form from being submitted. It may still leave one box pink as if it still needs to be checked but at least you have what you are looking for. 

[halves]

Hi TNT
Thank you for your help.

I inserted the code as you suggested. I assumed that the top portion of code was verbatim. I changed the variables in the bottom code as you suggested. I removed the existing validate code for the check box. Here it is with some of the surrounding code. It still allows the form to be submitted with blank checkboxes.

if (validateField('field_6','fieldBox_6','country',1) == false)
retVal=false;
if (validateField('field_7','fieldBox_7','textarea',1) == false)
retVal=false;
if (validateCheckBox('field_8_option_1','fieldBox_8','checkbox',1) == false) {
  if (validateCheckBox('field_8_option_2','fieldBox_8','checkbox',1) == false) {
retVal=false;
}
}

                if(retVal == false)
                {
                    alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                    return false;
                }
                return retVal;
            }

[TNTEverett]

You can use the Javascript alerts to see if code is being executed. 
Change the validate function like this.  It should pop up alerts indicating the function is being called. 

function validateCheckBox(fieldId, fieldBoxId, fieldType, required)
{
alert('Validating CheckBox');
if(fieldType == 'checkbox') {
alert('It is a CheckBox');
fieldBox = document.getElementById(fieldBoxId);
if(required == 1) {
alert('It is required');
myfieldId = fieldId+"_option_1";
fieldObj = document.getElementById(myfieldId);
if(fieldObj.checked == 1)
{
alert('It is checked');
myfieldId = fieldId+"_option_1";
fieldObj = document.getElementById(myfieldId);
fieldObj.setAttribute("class","mainForm");
fieldObj.setAttribute("className","mainForm");

return true;
} else {
alert('It is NOT checked');
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
}

fieldObj.focus();
return false;
}
}
}

[halves]

I received three alert messages: validating chekbox; it is a checkbox; it is required; however, the form still submits without either checkbox being checked.

[TNTEverett]

OK, so I should have caught this the first time.  The number of options you have is 2 ('field_8_option_1','field_8_option_2').
You will need this function which accounts for more than one option. 

function validateCheckBox(fieldId, fieldBoxId, fieldType, mysize, minrequired) {
  ii=0;
  fieldBox = document.getElementById(fieldBoxId);
  if(minrequired > 0) {
    <!-- Loop through each checkbox to see if any are checked -->
    for( i=1; i<=mysize; i++) {
      myfieldId = fieldId+"_option_"+i;
      fieldObj = document.getElementById(myfieldId);
      if(fieldObj.checked == 1) {
        <!-- Keep track of the number of checkboxes checked -->
        ii++;
        myfieldId = fieldId+"_option_"+i;
        fieldObj = document.getElementById(myfieldId);
        fieldObj.setAttribute("class","mainForm");
        fieldObj.setAttribute("className","mainForm");
      <!-- If not checked return box to highlighted state -->
      } else {
        fieldObj.setAttribute("class","mainFormError");
        fieldObj.setAttribute("className","mainFormError");
      }
    }
    if(ii == minrequired) {
      for( i=1; i<=mysize; i++) {
        <!-- Return all checkboxes to non-highlighted state -->
        myfieldId = fieldId+"_option_"+i;
        fieldObj = document.getElementById(myfieldId);
        fieldObj.setAttribute("class","mainForm");
        fieldObj.setAttribute("className","mainForm");
      }
      return true;
    }
    fieldObj.focus();
    return false;
  }
}

You will also need to modify the function call at the end of your form file. 

if(validateCheckBox'field_8','fieldBox_8','checkbox',2,1) == false) {
retVal=false; 
}

[halves]

Sorry to trouble you with this one, but thanks for the help.

I replaced the code and still the form submits without any checkboxes selected. Also when one or both are selected, the form submits with the resulting email showing "array" instead of my option titles.

[TNTEverett]

There is some other basic problem here.  If you want me to fix it (should be relatively simple) email me a copy of the form and processor.php file.

[halves]

Hi TNT,

I emailed you the files earlier today. Don't want to harass you... just wondering if you got them.

Thanx.

[S van Z]

Hi,

I have a form with radio buttons and check boxes which are required. Whether or not either check box is checked and one of the required radio button groups in the form is accepted. How do I correct this? I want at least one check box checked and a radio button selected in the group of radio buttons before the form can be submited.

I have put the code for check box groups, from above in my form but this is not working.
Is ther someone who nows wat i have done wrong?

My form is here: http://www.gbw-europe.com/form78456/form.html

Thanx for your time.

[TNTEverett]

This is not part of the standard generator features but I have done it before.  Look for another post with this information.  Later tonight I will respond with an answer in more detail. 
It requires adding some javascript code. 

[S van Z]

Hi TNT,

I have found some subjects about this problem in this forum and I have tryed sevral javascripts but I can not find an good working script for groups of check boxes.
Now I have paste the first script from above and this is working but only for one check box.
I have also tryed the folowing code:

function validateCheckBox(fieldId, fieldBoxId, fieldType, mysize, minrequired) {
ii=0;
fieldBox = document.getElementById(fieldBoxId);
if(minrequired > 0) {
<!-- Loop through each checkbox to see if any are checked -->
for( i=1; i<=mysize; i++) {
myfieldId = fieldId+"_option_"+i;
fieldObj = document.getElementById(myfieldId);
if(fieldObj.checked == 1) {
<!-- Keep track of the number of checkboxes checked -->
ii++;
myfieldId = fieldId+"_option_"+i;
fieldObj = document.getElementById(myfieldId);
fieldObj.setAttribute("class","mainForm");
fieldObj.setAttribute("className","mainForm");
<!-- If not checked return box to highlighted state -->
} else {
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
}
}
if(ii == minrequired) {
for( i=1; i<=mysize; i++) {
<!-- Return all checkboxes to non-highlighted state -->
myfieldId = fieldId+"_option_"+i;
fieldObj = document.getElementById(myfieldId);
fieldObj.setAttribute("class","mainForm");
fieldObj.setAttribute("className","mainForm");
}
return true;
}
fieldObj.focus();
return false;
}
}

You will also need to modify the function call at the end of your form file. 

if(validateCheckBox'field_8','fieldBox_8','checkbox',2,1) == false) { 
retVal=false; 
} 

-----
replaced the code and still the form submits without any checkboxes selected. Also when one or more are selected, the form submits.
-----

Do you now what I have done wrong?

Thanks for your time.