• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • Last Modified:

Form validation with multiple types of required inputs

Form validation with multiple types of inputs  

I need to validate a form that has diffrent types of input fields. The showstopper for me is the checkboxes. I need to ensure the user checks at least one box and fill in all other required text field prior to submitting the form. I have tried DW form validation, Yaromat form validation and Checkbox solutions found on this site. But I cannot figure how to get them all working together.  I attached the code to a blank form similar to the one I am working on.

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
     <title>Untitled</title>
 
     <script language="javascript">
          function check(frm){
               var tbl=document.getElementById('testTable');
               var flag=true;
                     var sOpt=0;
               for(i=0;i<tbl.rows.length-1;i++){
                    for(j=0;j<tbl.rows[i].childNodes.length;j++){
                         for(k=0;k<tbl.rows[i].childNodes[j].childNodes.length;k++){
                              if(tbl.rows[i].childNodes[j].childNodes[k].type=="checkbox"){
                                   if(tbl.rows[i].childNodes[j].childNodes[k].checked){
                                        sOpt++;
                                        break;
                                   }
                              }
                              if(tbl.rows[i].childNodes[j].childNodes[k].type=="text"){
                                   if(tbl.rows[i].childNodes[j].childNodes[k].value.length>0){
                                        sOpt++;
                                        break;
                                   }
                              }
                         }
                    }
                    if(sOpt>0) break;
               }
                     if(sOpt<1){alert("There needs at least one information to be filled"); return false;}
               return true;
          }
 
 
          function checkForSecond(){
               var tbl=document.getElementById('testTable');
               var flag=true;
               for(i=0;i<tbl.rows.length-1;i++){
                           var sOpt=0;
                    for(j=0;j<tbl.rows[i].childNodes.length;j++){
                         for(k=0;k<tbl.rows[i].childNodes[j].childNodes.length;k++){
                              if(tbl.rows[i].childNodes[j].childNodes[k].type=="checkbox"){
                                       sOpt++;
                                   if(tbl.rows[i].childNodes[j].childNodes[k].checked && sOpt==2){
                                               var win=window.open("check.html",'my_window','top=50,left=100,width=460,height=390','toolbar=no','scrollbars=no');
                                               tbl.rows[i].childNodes[j].childNodes[k].checked=false;
                                        break;
                                   }
                              }
                         }
                    }
 
               }
          }
     </script>
</head>
 
<body>
 
<form name="testing" method="post" onSubmit="return check(this);">
  <table   border="0" cellpadding="0" cellspacing="5" >
    <tr>
      <td width="169" nowrap="nowrap" align="right">Employee Number:</td>
      <td width="452"><input name="emp_num" type="text" class="content" id="emp_num" size="8" maxlength="8" /> <span class="content">Required </span></td>
      <td width="15">&nbsp;</td>
    </tr>
    <tr>
      <td nowrap="nowrap" align="right" class="content">Email Address:</td>
      <td><input name="email_address" type="text" class="content" id="email_address" size="20" maxlength="20" />
      <span class="content">Required </span></td>
      <td>&nbsp;</td>
    </tr>
 
    <tr>
      <td valign="top" nowrap="nowrap" align="right" class="content">Checkbox:</td>
      <td valign="middle" nowrap="nowrap" class="content">&nbsp;
          <input name="Box1" type="checkbox" id="Box1" value="Box1"  />
        Box1 
        &nbsp;
        <input name="Box2" type="checkbox" id="Box2" value="Box2"  />
        Box2 
        &nbsp;
        <input name="Box3" type="checkbox" id="Box3" value="Box3" />
        Box3
        &nbsp;
        <input name="Box4" type="checkbox" id="Box4" value="Box4"  />
        Box4&nbsp;
        <input name="Box5" type="checkbox" id="Box5" value="Box5" />
        &nbsp;Box5 (Must select atleast one)</td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap" class="content"><hr />
        Text box 1</td>
      <td valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap" class="content"><br />
          <textarea name="fault_message" cols="45" rows="5" wrap="physical" class="content" id="fault_message"></textarea>
 Required         
 <hr /></td>
      <td valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap" class="content">Text box 2</td>
      <td valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap" class="content"><p align="left"><br />
              <textarea name="components_affected" cols="45" rows="5" wrap="physical" class="content" id="components_affected"></textarea>
          Not Required<hr />      </td>
      <td valign="top">&nbsp;</td>
    </tr>
 
    <tr>
      <td colspan="3" align="right"valign="top" nowrap="nowrap" class="content"><div align="center">
        <input type="submit" name="button" id="button" value="Submit" />
      </div></td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window

0
Upperdecker
Asked:
Upperdecker
  • 2
  • 2
1 Solution
 
yessirnosirCommented:
Someone may have a more elegant solution, but I built a multi-input form with 24 check boxes where I used the javascript code below as part of the form validation, to ensure that at least one of the check boxes or the comment box is filled in.   It relies on each check box having a name with an index number built in, of the form int1, int2, int3, etc...  Then the code cycles through the comment box, followed by the 24 check boxes, and as long as at least one has been used, the value checkCount will be > 0.

<input type="checkbox" name="int7" value="Sample Check Box" id="sample">
    var checkCount = 0;
	 if (!(theForm.comments.value == "")){
	     checkCount++;
		 }
     
	 for (var i = 1; i <= 24; i++){
          formname = "int" + i;
		  
		  if (theForm[formname].checked){
               checkCount++;
          	}
     	}
     if (checkCount == 0){
          alert("Please check at least selection, or enter comments");
          return false;
     }
     return true;
}

Open in new window

0
 
yessirnosirCommented:
It occurred to me that my prior snippet, out of context with the rest of the validation, might not make sense, so here is the whole validation function.
function form_validator(theForm)
{
 
  if (theForm.name.value == "")
  {
    alert("Please enter a value for the \"Name\" field.");
    theForm.name.focus();
    return (false);
  }
 
  
  if (theForm.email.value == "")
  {
    alert("Please enter a value for the \"Email Address\" field.");
    theForm.email.focus();
    return (false);
  }
 
  if (theForm.email.value.length > 60)
  {
    alert("Please enter at most 60 characters in the \"Email Address\" field.");
    theForm.email.focus();
    return (false);
  }
 
 
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (!(filter.test(theForm.email.value))) 
{
alert("Please input a valid email address!");
return (false);
}
	
     var checkCount = 0;
	 if (!(theForm.comments.value == "")){
	     checkCount++;
		 }
     
	 for (var i = 1; i <= 24; i++){
          formname = "int" + i;
		  
		  if (theForm[formname].checked){
               checkCount++;
          	}
     	}
     if (checkCount == 0){
          alert("Please check at least one selection, or enter comments");
          return false;
     }
     return true;
}

Open in new window

0
 
Jason C. LevineNo oneCommented:
Download wforms javascript library and read up on the validation behaviors:

http://www.formassembly.com/wForms/v2.0/documentation/input-validation.php

specifically: "Example: At least one of these two checkbox must be checked."

Place all your checkboxes into one container element (div for instance) and set the required class on the container.  If at least one check is present, it passes otherwise it generates an error.

0
 
UpperdeckerAuthor Commented:
Great tool. Thanks
0
 
Jason C. LevineNo oneCommented:
>> Great tool. Thanks

You're welcome.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now