Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Form validation with multiple types of required inputs

Posted on 2008-10-03
5
Medium Priority
?
489 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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

927 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