Form validating text field and radio button

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

chuckbeatsAsked:
Who is Participating?
 
hieloCommented:
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
 
chuckbeatsAuthor Commented:
You are true greatness man!!!
0
 
dhanushkadCommented:
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
 
hieloCommented:
glad to help
0
 
rrattieCommented:
Would this be possible without using an onSubmit?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.