asked on

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

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chuckbeats

ASKER

You are true greatness man!!!

dhanushkad

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;
}
}
}
}

hielo

glad to help

rrattie

Would this be possible without using an onSubmit?