PDA

View Full Version : simple form validation

dcslick
06-19-2005, 11:22 PM
Hello,

I have to do a simple form with javascript validation. The vaildation is that all fields are filled in, at this point I have no idea why its not working its probably in front of me but I am too fustrated. Also I would like my email address field to validate the @ and . I had it working for another form but I cant on this one.

Any help would be appreciated
Thanks


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>eform</title>
<style>
body {background-color: yellow}
.required {color:red}
h1 {color: rgb(0,0,255)}
</style>

<script type="text/javascript">
<!--
function validateForm()
{
var isValid = false;

if (document.mail.fullname.value == '')
{
alert('Please enter your name.');
document.mail.fullname.focus();
}
else if (document.mail.email.value == '')
{
alert('Please enter your email address.');
document.mail.email.focus();
}

else if (document.mail.phone.value == '')
{
alert('Please enter your phone number.');
document.mail.phone.focus();
}

else if (document.mail.mf[0].checked==false &&
document.mail.mf[1].checked==false)
{
alert('Are you a Male or Female.');
document.mail.mf[0].focus();
}

else if (document.mail.os[0].checked==false &&
document.mail.os[1].checked==false)
{
alert('Please Select your Favorite OS.');
document.mail.os[0].focus();
}
else if (document.mail.color[0].checked==false &&
document.mail.color[1].checked==false &&
document.mail.color[2].checked==false &&
document.mail.color[3].checked==false &&
document.mail.color[4].checked==false &&
document.mail.color[5].checked==false)
{
alert('Please select a color.');
document.mail.color[0].focus();
}

else if (document.mail.kids.checked==false &&
document.mail.dogs.checked==false &&
document.mail.cats.checked==false &&
document.mail.alligator.checked==false)
{
alert('Please select a pet or family.');
document.mail.kids.focus();
}
else if (document.mail.message.value == '')
{
alert('Please enter a message!');
document.mail.message.focus();
}
else
{

isValid = true;
}

return isValid

}
//-->
</script>
</head>

<body>
<LEFT>
<FORM NAME = "mail" ACTION = "mailto:dougcc@cox.net" METHOD = "POST" ENCTYPE = "text/plain">
<INPUT TYPE = "hidden" NAME = "info">
<TABLE BORDER = 0 CELLPADDING = 5 CELLSPACING = 0>
<tr>
<td colspan="2" align="center"><h1>Your Feedback</h1></td>
</tr>
<TR>
<td>Your Name<span class="required">*</span>
<P>
<INPUT TYPE = "TEXT" NAME = "fullname">
</TD>
<td>Your Email Address<span class="required">*</span>
<P>
<INPUT TYPE = "TEXT" NAME = "email">
</TD>
</TR>
<TR>
<TD>
Your Phone Number<span class="required">*</span>
<P>
<INPUT TYPE = "TEXT" NAME = "phone">
<td>&nbsp;</TD>
</TR>
<TR>
<td>Male or Female<span class="required">*</span>
<P>
<input type="radio" name="mf" value="male">Male<br>
<input type="radio" name="mf" value="female">Female<br>
</TR>
<TR>
<td>MS Windows or Unix:<span class="required">*</span>:
<p>
<input type="radio" name="os" value="win">MS Windows<br>
<input type="radio" name="os" value="unix">Unix<br>
</TR>
<tr>
<td>Color:<span class="required">*</span></td>
<td>
<select name="color">
<option value="">--- Select your favorite color ---
<option value="rd">Red
<option value="be">Blue
<option value="oe">Orange
<option value="bk">Black
<option value="gn">Green
<option value="yw">Yellow
</select>
</td>
</tr>
<td valign="top">Family and Pets:<span class="required">*</span></td>
<td>
<input type="checkbox" name="Kids" value="kids">Kids<br>
<input type="checkbox" name="Dogs" value="dogs">Dogs<br>
<input type="checkbox" name="Cats" value="cats">Cats<br>
<input type="checkbox" name="Alligator" value="alligator">Alligator

</td>
</tr>
<TR>
<TD COLSPAN = "2">
Enter your Message:
<P>
<TEXTAREA ROWS = "8" COLS = "38" NAME = "message">
</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "SUBMIT" VALUE = " Submit ">
<INPUT TYPE = "RESET" VALUE = " Reset ">
</TD>
</TR>
</TABLE>
</FORM>

</body>

</html>
Brandoe85
06-20-2005, 01:48 AM
Try This:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>eform</title>
<style>
body {background-color: yellow}
.required {color:red}
h1 {color: rgb(0,0,255)}
</style>

<script type="text/javascript">
<!--

//taken from glenn's post here: http://www.codingforums.com/showthread.php?t=57335
function isChecked(radGroup)
{
for (var i = 0; i < radGroup.length; i++)
{
if (radGroup[i].checked) return true;
}

return false;
}

function validateForm(e)
{

var errorMsgs = new Array();
var errorFields = new Array();

if(e.fullname.value == '')
{
errorMsgs[errorMsgs.length] = "Please enter your name.";
errorFields[errorFields.length] = e.fullname;
}
if(e.email.value == '' || e.email.value.indexOf("@") == -1 || e.email.value.indexOf(".") == -1)
{
errorMsgs[errorMsgs.length] = "Please enter your email address.";
errorFields[errorFields.length] = e.email;
}
if(e.phone.value == '')
{
errorMsgs[errorMsgs.length] = "Please enter your phone number.";
errorFields[errorFields.length] = e.phone;
}
if(!isChecked(e.mf))
{
errorMsgs[errorMsgs.length] = "Are you a Male or Female.";
errorFields[errorFields.length] = e.mf;
}
if(!isChecked(e.os))
{
errorMsgs[errorMsgs.length] = "Please Select your Favorite OS.";
errorFields[errorFields.length] = e.os;
}
if(e.color.selectedIndex <= 0)
{
errorMsgs[errorMsgs.length] = "Please select a color.";
errorFields[errorFields.length] = e.color;
}
if(!e.Kids.checked && !e.Dogs.checked && !e.Cats.checked && !e.Alligator.checked)
{
errorMsgs[errorMsgs.length] = "Please select a pet or family.";
errorFields[errorFields.length] = e.Dogs;
}
if(e.message.value == '')
{
errorMsgs[errorMsgs.length] = "Please enter a message!";
errorFields[errorFields.length] = e.message;
}

if(errorMsgs.length != 0)
{
var error= "Please fix the following errors:\n";
for(var i = 0; i < errorMsgs.length; i++)
{
error = error + "*" + errorMsgs[i] + "\n";
}
alert(error);

if(errorFields[0].type == "text")
errorFields[0].select();

return false;
}

}
//-->
</script>
</head>

<body>
<LEFT>
<FORM NAME = "mail" METHOD = "POST" ACTION = "mailto:dougcc@cox.net" ENCTYPE = "text/plain" onsubmit="return validateForm(this);">
<INPUT TYPE = "hidden" NAME = "info">
<TABLE BORDER = 0 CELLPADDING = 5 CELLSPACING = 0>
<tr>
<td colspan="2" align="center"><h1>Your Feedback</h1></td>
</tr>
<TR>
<td>Your Name<span class="required">*</span>
<P>
<INPUT TYPE = "TEXT" NAME = "fullname">
</TD>
<td>Your Email Address<span class="required">*</span>
<P>
<INPUT TYPE = "TEXT" NAME = "email">
</TD>
</TR>
<TR>
<TD>
Your Phone Number<span class="required">*</span>
<P>
<INPUT TYPE = "TEXT" NAME = "phone">
<td>&nbsp;</TD>
</TR>
<TR>
<td>Male or Female<span class="required">*</span>
<P>
<input type="radio" name="mf" value="male">Male<br>
<input type="radio" name="mf" value="female">Female<br>
</TR>
<TR>
<td>MS Windows or Unix:<span class="required">*</span>:
<p>
<input type="radio" name="os" value="win">MS Windows<br>
<input type="radio" name="os" value="unix">Unix<br>
</TR>
<tr>
<td>Color:<span class="required">*</span></td>
<td>
<select name="color">
<option value="">--- Select your favorite color ---
<option value="rd">Red
<option value="be">Blue
<option value="oe">Orange
<option value="bk">Black
<option value="gn">Green
<option value="yw">Yellow
</select>
</td>
</tr>
<td valign="top">Family and Pets:<span class="required">*</span></td>
<td>
<input type="checkbox" name="Kids" value="kids">Kids<br>
<input type="checkbox" name="Dogs" value="dogs">Dogs<br>
<input type="checkbox" name="Cats" value="cats">Cats<br>
<input type="checkbox" name="Alligator" value="alligator">Alligator

</td>
</tr>
<TR>
<TD COLSPAN = "2">
Enter your Message:
<P>
<TEXTAREA ROWS = "8" COLS = "38" NAME = "message">
</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "SUBMIT" VALUE = " Submit ">
<INPUT TYPE = "RESET" VALUE = " Reset ">
</TD>
</TR>
</TABLE>
</FORM>

</body>

</html>
dcslick
06-20-2005, 07:47 PM
Thanks Brando that works great.