?
Solved

Form validating text field and radio button

Posted on 2008-11-07
5
Medium Priority
?
431 Views
Last Modified: 2012-05-05
Pretty simple validation problem.

I have 2 text fields, the first one must be validated and be filled out.  The second one depends on whether a certain radio button is clicked.

Here is the layout
2 textfields
3 radio buttons

The first textfield must be filled out
one of the radio buttons must be clicked.
If the last radio button is clicked, then the last textfield must be filled out.

Hope i explained it properly, i have included my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Redesign Sign Up</title>
<script type="text/javascript">
<!--
 
function validate_form ( )
{
    valid = true;
 
    if ( document.redesign.name.value == "" || document.redesign.otherAttendText.value == ""  )
    {
        alert ( "oops, you missed a required field." );
        valid = false;
    }
 
    return valid;
}
 
//-->
</script>
 
<style type="text/css">
 
* {
padding:0px;
margin:0px;
}
 
body {
background-color:#f2f2f2;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
}
 
h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#333333;
}
 
.signIn {
margin:10px;
}
 
</style>
</head>
 
<body>
 
<form action="#" name="redesign" method="post" onsubmit="return validate_form ( );">
 
<table width="700" border="0" class="signIn">
  <tr>
    <td colspan="2"><h1>Ebby.com... The Best Address in Real Estate!</h1></td>
    
  </tr>
   <tr>
    <td width="75">&nbsp;</td>
    <td width="615">&nbsp;</td>
  </tr>
  <tr>
    <td>WHAT:</td>
    <td>Ebby.com Redesign Meeting </td>
  </tr>
  <tr>
    <td>WHO:</td>
    <td>2007 Year End Honor Roll</td>
  </tr>
  <tr>
    <td>WHEN:</td>
    <td>November 12, 2:00 p.m.</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">WHERE:</td>
    <td>The Lending Partners / Home Team Mortgage - <a href="http://maps.google.com/maps?hl=en&q=5085+W.+Park+Blvd.,+Ste.+200+%09%09Plano,+Texas+75093&ie=UTF8&z=16&g=5085+W.+Park+Blvd.,+Ste.+200+%09%09Plano,+Texas+75093&iwloc=addr">map it</a><br />
		5085 W. Park Blvd., Ste. 200<br />
		Plano, Texas 75093<br />
		972-665-1900
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td>Name:</td>
    <td><input name="name" type="text" size="30" maxlength="100" /></td>
  </tr>
   <tr>
    <td colspan="2"> <input name="attend" type="radio" value="yesAttend" /> &nbsp; Yes, I will attend</td>
    
  </tr>
   <tr>
    <td colspan="2"><input name="attend" type="radio" value="noAttend" /> &nbsp; I will not be able to attend</td>
    
  </tr>
   <tr>
    <td colspan="2"><input name="attend" type="radio" value="otherAttend" /> &nbsp; I will not be able to attend, but <input name="otherAttendText" type="text" /> (Group member/assistant) will attend </td>
    
  </tr>
   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="right"><input name="SUBMIT" type="submit" value="Submit" /></td>
  </tr>
</table>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:chuckbeats
5 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22906438
try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Redesign Sign Up</title>
<script type="text/javascript">
<!--
 
function validate_form ( f )
{
	var msg=[];
	if(f.name.value=="")
		msg[msg.length]="Name is required";
	var checked=false;
	for( var i=0,limit=f.attend.length; i < limit; ++i)
	{
		if(f.attend[i].checked)
		{
			checked=true;
			break;
		}
	}
	if( !checked )
	{
		msg[msg.length]= "You must check one of the options";
	}
	else if(f.attend[2].checked && f.otherAttendText.value=="")
	{
		msg[msg.length]="You must specify Other";
	}
	
	if( msg.length )
	{
		alert(msg.join("\n"));
	}
return (msg.length==0);
}
 
//-->
</script>
 
<style type="text/css">
 
* {
padding:0px;
margin:0px;
}
 
body {
background-color:#f2f2f2;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
}
 
h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#333333;
}
 
.signIn {
margin:10px;
}
 
</style>
</head>
 
<body>
 
<form action="#" name="redesign" method="post" onsubmit="return validate_form ( this );">
 
<table width="700" border="0" class="signIn">
  <tr>
    <td colspan="2"><h1>Ebby.com... The Best Address in Real Estate!</h1></td>
    
  </tr>
   <tr>
    <td width="75"> </td>
    <td width="615"> </td>
  </tr>
  <tr>
    <td>WHAT:</td>
    <td>Ebby.com Redesign Meeting </td>
  </tr>
  <tr>
    <td>WHO:</td>
    <td>2007 Year End Honor Roll</td>
  </tr>
  <tr>
    <td>WHEN:</td>
    <td>November 12, 2:00 p.m.</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td valign="top">WHERE:</td>
    <td>The Lending Partners / Home Team Mortgage - <a href="http://maps.google.com/maps?hl=en&q=5085+W.+Park+Blvd.,+Ste.+200+%09%09Plano,+Texas+75093&ie=UTF8&z=16&g=5085+W.+Park+Blvd.,+Ste.+200+%09%09Plano,+Texas+75093&iwloc=addr">map it</a> 
            5085 W. Park Blvd., Ste. 200 
            Plano, Texas 75093 
            972-665-1900
</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
   <tr>
    <td>Name:</td>
    <td><input name="name" type="text" size="30" maxlength="100" /></td>
  </tr>
   <tr>
    <td colspan="2"> <input name="attend" type="radio" value="yesAttend" />   Yes, I will attend</td>
    
  </tr>
   <tr>
    <td colspan="2"><input name="attend" type="radio" value="noAttend" />   I will not be able to attend</td>
    
  </tr>
   <tr>
    <td colspan="2"><input name="attend" type="radio" value="otherAttend" />   I will not be able to attend, but <input name="otherAttendText" type="text" /> (Group member/assistant) will attend </td>
    
  </tr>
   <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td align="right"><input name="SUBMIT" type="submit" value="Submit" /></td>
  </tr>
</table>
</form>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:chuckbeats
ID: 31514441
You are true greatness man!!!
0
 
LVL 3

Expert Comment

by:dhanushkad
ID: 22906519
valid = true;

if (document.txt1.value == '')
{
        alert ( "oops, you missed a required field." );
        valid = false;
}
else
{
      var chosen = false;    
      len = document.f1.r1.length

       for (i = 0; i <len; i++) {
             if (document.f1.r1[i].checked) {
                     chosen = true;}
            }

       if (chosen == false){
            alert ( "oops, you missed a required field." );
            valid = false;
       }
       else{
             if((document.f1.r1[2].checked) && (document.txt2.value == ''))){
                    alert ( "oops, you missed a required field." );
                    valid = false;
             }
       }
}
}

0
 
LVL 82

Expert Comment

by:hielo
ID: 22906548
glad to help
0
 
LVL 2

Expert Comment

by:rrattie
ID: 23802802
Would this be possible without using an onSubmit?
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
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 how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses
Course of the Month15 days, 6 hours left to enroll

839 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