Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Form validation with multiple types of required inputs

Posted on 2008-10-03
5
482 Views
Last Modified: 2010-04-21
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
Comment
Question by:Upperdecker
  • 2
  • 2
5 Comments
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22637178
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
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22637254
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
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 22637965
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
 

Author Closing Comment

by:Upperdecker
ID: 31502882
Great tool. Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22652377
>> Great tool. Thanks

You're welcome.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

837 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question