Solved

Form validation with multiple types of required inputs

Posted on 2008-10-03
5
479 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
How is NULL an Object in Javascript? 4 26
HTML page and JavaScript 2 55
Test ddwrt:UserLookup 1 23
Hidden Field Value 10 37
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted 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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now