PDA

Click to See Complete Forum and Search --> : validating forms

hcraig
11-05-2003, 07:58 AM
Hi, I'm new to this and I need to validate a form with check boxes, radio buttons, drop down menus and text fields. Is this possible? If you could direct me to a web site or any help would be appreciated

thank you,
Henry Craig
hcraig@webmedx.com
fredmv
11-05-2003, 07:59 AM
Do you have any code we could look at? Possibly the JavaScript code you're currently working with? Or the HTML that creates the form? It would help us in helping you. ;)
hcraig
11-05-2003, 08:49 AM
thanks for taking the time to look at this


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body bgcolor="#FFFFFF" text="#000000">
application
<form name="form1" method="post" action="response.asp">
<p>How did you hear about Webmedx
<select name="select">
<option value="AAMT Convention" selected>AAMT Convention</option>
<option value="AAMT Website">AAMT Website</option>
<option value="CareerStep">CareerStep</option>
<option value="JAAMT">JAAMT</option>
<option value="Jobscience">Jobscience</option>
</select>
</p>
<p>Average Productivity:
<input type="radio" name="prod" value="lph">
lines per hour
<input type="radio" name="prod" value="mph">
dictated minutes per hour<br>
lines per hour or dictated minutes per hour
<input type="text" name="lph_mph">
</p>
<p>Average Monthly QA Score:
<input type="text" name="textfield">
<br>
</p>
<p><br>
</p>
<p>&nbsp; </p>
</form>
</body>
</html>

What I would ideally like to do is have the four elements required;
1. How did you hear about Webmedx? drop down menu
2. Average productivity: radio buttons
3. lines per hour or dictated minutes per hour: text field
4. Average monthly QA score: text field

thank you,
Hank
fredmv
11-05-2003, 09:57 AM
Here's what I've done:
I've converted your code (by hand) to XHTML 1.0 Stirct. It is now valid, well-formed XHTML.
I'm now using tables to layout your form. It is now more semantically correct and easier to read. This is proper use of tables since forms are considered to be tabular data.
I used JavaScript to validate the form. It will alert the user if they didn't fill out any part of the form. Client-side validation can help, but I would suggest doing another check just to be sure on the server-side.
In the process of converting your site to valid XHTML 1.0 Strict, I removed all of your deprecated attrbiutes (such as bgcolor, etc.) and used CSS for all presentational purposes.
All of the code is now tabbed out and much easier to read.


Here is the final code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Application</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
body {
font-family: helvetica, serif;
color: #000000;
}

table {
width: 100%;
border-style: none;
}

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var f = null;
var err = null;

function checkForm()
{
err = "Errors:\n\n";
f = document.getElementById( "form" );

if( f.select.selectedIndex == 0 )
{
err += "\t- Please select an option. Where did you hear about Webmedx?\n";
}

if( (!f.prod[0].checked) && (!f.prod[1].checked) )
{
err += "\t- Please select an option. What is your average productivity?\n";
}

if( !f.lphmph.value )
{
err += "\t- Please enter your lines per hour or dictated minutes per hour.\n";
}

if( !f.qa.value )
{
err += "\t- Please enter your average QA score.\n";
}

if( err != "Errors:\n\n" )
{
alert( err );
return false;
}

else
{
return true;
}
}
/*]]>*/
</script>
</head>

<body>
<h1>Application</h1>

<form id="form" method="post" action="response.asp" onsubmit="return checkForm();">
<div>
<table cellpadding="5" cellspacing="5" summary="">
<tr>
<td>How did you hear about Webmedx?</td>
<td>
<select name="select">
<option value="" selected="selected">&lt; select an option &gt;</option>
<option value="AAMT Convention">AAMT Convention</option>
<option value="AAMT Website">AAMT Website</option>
<option value="CareerStep">CareerStep</option>
<option value="JAAMT">JAAMT</option>
<option value="Jobscience">Jobscience</option>
</select>
</td>
</tr>
<tr>
<td>Average Productivity</td>
<td>
<ul>
<li><input type="radio" name="prod" value="lph" />lines per hour</li>
<li><input type="radio" name="prod" value="mph" />dictated minutes per hour</li>
</ul>
</td>
</tr>
<tr>
<td>Lines per hour or dictated minutes per hour?</td>
<td><input type="text" name="lphmph" /></td>
</tr>
<tr>
<td>Average Monthly QA Score?</td>
<td><input type="text" name="qa" /></td>
</tr>
<tr>
<td style="text-align: left;">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>I hope that helps you out. ;)
hcraig
11-05-2003, 10:19 AM
WOW!, Thanks
this is great, I tested it out but if I select one of the radio buttons for average productivity the error message still appears

thanks again,
Hank
fredmv
11-05-2003, 10:20 AM
Hey, no problem. I'm happy that helped you out. About your error, I'm aware of it. I edited the script right before you replied. The code should work perfectly now. Also, great job on your site. I like the style and it looks extremely professional!