PDA

View Full Version : Form Validation/Submision Problem

sunnyview
08-27-2002, 10:01 AM
When you click 'OK' to the message telling you that you have to complete a field, it instantly submits the form there and then, before you have had a chance to complete it. It does this for every field left blank.

Anybody???



<HTML>
<HEAD>

<script language="JavaScript">
<!--
// Function to validate the form.
function ProcessForm()
{

var Proceed = 1;
var Message;
var FocusField;

while (Proceed == 1)
{

if (!document.Validation.Name.value)
{
Message = "You must enter your name.";
FocusField = "Name";
Proceed = 0;
break;
}

if (document.Validation.AgeGroup.selectedIndex==0)
{
Message = "You must select your age group.";
FocusField = "AgeGroup";
Proceed = 0;
break;
}

var Address = document.Validation.Address.value
if (Address.length==0)
{
Message = "You must enter your address.";
FocusField = "Address";
Proceed = 0;
break;
}

var CityListLen = 4;
var SelectProceed = 0;
for (i=0; i<=(CityListLen - 1); i++)
{
if (document.Validation.City[i].selected)
{
SelectProceed = 1;
break;
}
}
if (SelectProceed == 0)
{
Message = "You must select at least one city.";
FocusField = "City";
Proceed = 0;
break;
}

var SkillListLen = 4;
var CheckboxProceed = 0;
for (i=0; i<=(SkillListLen - 1); i++)
{
if (document.Validation.Skill[i].checked)
{
CheckboxProceed = 1;
break;
}
}
if (CheckboxProceed == 0)
{
Message = "You must select at least one skill.";
FocusField = "";
Proceed = 0;
break;
}

if (document.Validation.USBorn[1].checked)
{
if (!document.Validation.CountryBorn.value)
{
Message = "If you weren't born in the US, you must enter the country in which you were born.";
FocusField = "CountryBorn";
Proceed = 0;
break;
}
}
break;
}

if (Proceed == 1)
{
alert("The form has been successfully completed.");
}
else
{
alert( Message );
if (FocusField != "")
{
eval("document.Validation." + FocusField + ".focus()");
}
}
}
//-->
</script>

</HEAD>

<BODY>

<p><i>* required fields</i></p>

<FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation">
<INPUT NAME="recipient" TYPE="HIDDEN" VALUE="mice@paradise.net.nz">

<p>
<table>
<tr>
<td><span class="label">Name:*</span></td>
<td><input type="text" name="Name"></td>
</tr>
<tr>
<td><span class="label">Age Group:*</span></td>
<td>
<select name="AgeGroup">
<option value="">Select Age Group


<option value="Under 18">Under 18



<option value="18-24">18-24



<option value="25-29">25-29



<option value="30-39">30-39



<option value="40 +">40 +


</select>
</td>
</tr>
<tr>
<td colspan="2"><span class="label">Address:*</span></td>
</tr>
<tr>
<td colspan="2"><textarea name="Address" cols="25" rows="3" wrap="virtual"></textarea></td>
</tr>
<tr>
<td colspan="2">
<table border="0">
<tr>
<td valign="top"><nobr><b>Select at least one city:*</b>&nbsp;&nbsp;&nbsp;</nobr></td>
<td valign="top"><b>Skill(s):*</b></td>
</tr>
<tr>
<td valign="top">
<select name="City" size="4" multiple>


<option value="Chicago">Chicago



<option value="Los Angeles">Los Angeles



<option value="New York">New York



<option value="Washington DC">Washington DC


</select>
</td>
<td valign="top">


<input type="checkbox" name="Skill" value="ASP">ASP<br>



<input type="checkbox" name="Skill" value="ColdFusion">ColdFusion<br>



<input type="checkbox" name="Skill" value="HTML">HTML<br>



<input type="checkbox" name="Skill" value="JavaScript">JavaScript<br>


</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><b>Were you born in the US?*</b></td>
</tr>
<tr>
<td colspan="2"><nobr><input type="radio" name="USBorn" value="1" checked>Yes&nbsp;&nbsp;<input type="radio"

name="USBorn" value="0">No</nobr></td>
</tr>
<tr>
<td colspan="2"><b>If "No", please enter the country.</b></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="CountryBorn"></td>
</tr>
<tr>
<td colspan="2" align="center">
<table border="0">
<tr>
<td><input type="submit" value="Send booking" onClick="ProcessForm()"></td>
<td><input type="reset" value="Clear" width="75" style="width:75"></td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</form>





<table border="0">
<tr>

<td><a href="source_code.cfm?CodeID=13"><img src="/graphics/btn_viewsource.gif" border="0"></a></td>


<td><a href="/downloads/FormValidation.zip"><img src="/graphics/btn_download.gif" border="0"></a></td>

<td><a href="javascript:history.go(-1)"><img src="/graphics/btn_back.gif" border="0"></a></td>
</tr>
</table>
<p>&nbsp;</p>
</td>
</tr>


<tr>
<td valign="bottom" align="center">
<p><b>Buy My Book!</b></p>
<a

href="http://www.amazon.com/exec/obidos/ASIN/0782141242/qid=1029592042/sr=1-3/ref=sr_1_3/103-6285903-8323001"
target="_new"><img src="/graphics/MasteringSmall.jpg" border="0" alt="Mastering ColdFusion MX"></a>
<p class="footer">Available 9/13/2002</p>
<p>&nbsp;</p>
</td>
</tr>

</table>
</td>
</tr>
<tr>
<td bgcolor="#ff6600"><img src="/graphics/spacer.gif" height="1" width="1"></td>
</tr>
<tr>
<td><img src="/graphics/spacer.gif" height="5" width="1"></td>
</tr>
<tr>
<td class="footer">&nbsp;&nbsp;&nbsp;&nbsp;Copyright © 1997 - 2002 WebTricks.com</td>
</tr>
<tr>
<td><img src="/graphics/spacer.gif" height="10" width="1"></td>
</tr>


<tr>
<td class="footer">&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.limitedreality.com"><img

src="/graphics/LimitedRealityBanner.gif" border="0" alt="Limited Reality LLC"></a></td>
</tr>

</table>

</body>
</html>
:) :confused:
glenngv
08-27-2002, 10:08 AM
call ProcessForm on onsubmit event of the Form tag instead. Then in the function, just put return false; when an input is invalid and return true; when all inputs are correct.

<FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation" onsubmit="return ProcessForm()">
...
<input type="submit" value="Send booking">
sunnyview
08-27-2002, 10:22 AM
Thanks for such a quick response. I've tried what was suggested, but it still doesn't work. Maybe I'm putting the return true; and the return false; in the wrong places. Please clarify.
glenngv
08-27-2002, 10:37 AM
post the code but i may not help you at once, im about to go now
beetle
08-27-2002, 04:30 PM
!!! WARNING !!! Shameless plug ahead!!

Is this code you are writing for yourself? Or something you cut and paste? If you are interested in something better, you should check out fValidate (http://www.peterbailey.net/fValidate), my form validation project. :D
sunnyview
08-27-2002, 10:29 PM
Here is the script again, but without the return false; and return true; pieces, as I believe I put them in the wrong place.

(Beetle - yes, the script has been copied).

<html>
<head>

<script language="JavaScript">
<!--
// Function to validate the form.
function ProcessForm()
{

var Proceed = 1;
var Message;
var FocusField;

while (Proceed == 1)
{

if (!document.Validation.Name.value)
{
Message = "You must enter your name.";
FocusField = "Name";
Proceed = 0;
break;
}

if (document.Validation.AgeGroup.selectedIndex==0)
{
Message = "You must select your age group.";
FocusField = "AgeGroup";
Proceed = 0;
break;
}

var Address = document.Validation.Address.value
if (Address.length==0)
{
Message = "You must enter your address.";
FocusField = "Address";
Proceed = 0;
break;
}

var CityListLen = 4;
var SelectProceed = 0;
for (i=0; i<=(CityListLen - 1); i++)
{
if (document.Validation.City[i].selected)
{
SelectProceed = 1;
break;
}
}
if (SelectProceed == 0)
{
Message = "You must select at least one city.";
FocusField = "City";
Proceed = 0;
break;
}

var SkillListLen = 4;
var CheckboxProceed = 0;
for (i=0; i<=(SkillListLen - 1); i++)
{
if (document.Validation.Skill[i].checked)
{
CheckboxProceed = 1;
break;
}
}
if (CheckboxProceed == 0)
{
Message = "You must select at least one skill.";
FocusField = "";
Proceed = 0;
break;
}

if (document.Validation.USBorn[1].checked)
{
if (!document.Validation.CountryBorn.value)
{
Message = "If you weren't born in the US, you must enter the country in which you were born.";
FocusField = "CountryBorn";
Proceed = 0;
break;
}
}
break;
}

if (Proceed == 1)
{
alert("The form has been successfully completed.");
}
else
{
alert( Message );
if (FocusField != "")
{
eval("document.Validation." + FocusField + ".focus()");
}
}
}
//-->
</script>


</head>

<body>
<p><i>* required fields</i></p>

<FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation" onsubmit="return

ProcessForm()">
<INPUT NAME="recipient" TYPE="HIDDEN" VALUE="mice@paradise.net.nz">

<p>
<table>
<tr>
<td><span class="label">Name:*</span></td>
<td><input type="text" name="Name"></td>
</tr>
<tr>
<td><span class="label">Age Group:*</span></td>
<td>
<select name="AgeGroup">
<option value="">Select Age Group

<option value="Under 18">Under 18

<option value="18-24">18-24

<option value="25-29">25-29

<option value="30-39">30-39

<option value="40 +">40 +


</select>
</td>
</tr>
<tr>
<td colspan="2"><span class="label">Address:*</span></td>
</tr>
<tr>
<td colspan="2"><textarea name="Address" cols="25" rows="3" wrap="virtual"></textarea></td>
</tr>
<tr>
<td colspan="2">
<table border="0">
<tr>
<td valign="top"><nobr><b>Select at least one city:*</b>&nbsp;&nbsp;&nbsp;</nobr></td>
<td valign="top"><b>Skill(s):*</b></td>
</tr>
<tr>
<td valign="top">
<select name="City" size="4" multiple>

<option value="Chicago">Chicago

<option value="Los Angeles">Los Angeles

<option value="New York">New York

<option value="Washington DC">Washington DC


</select>
</td>
<td valign="top">


<input type="checkbox" name="Skill" value="ASP">ASP<br>



<input type="checkbox" name="Skill" value="ColdFusion">ColdFusion<br>



<input type="checkbox" name="Skill" value="HTML">HTML<br>



<input type="checkbox" name="Skill" value="JavaScript">JavaScript<br>


</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><b>Were you born in the US?*</b></td>
</tr>
<tr>
<td colspan="2"><nobr><input type="radio" name="USBorn" value="1" checked>Yes&nbsp;&nbsp;<input type="radio"

name="USBorn" value="0">No</nobr></td>
</tr>
<tr>
<td colspan="2"><b>If "No", please enter the country.</b></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="CountryBorn"></td>
</tr>
<tr>
<td colspan="2" align="center">
<table border="0">
<tr>
<td><input type="submit" value="Send booking"></td>
<td><input type="reset" value="Clear" width="75" style="width:75"></td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</form>
</body>
</html>
whammy
08-28-2002, 12:53 AM
Here you go - the break; statements were not right - and unnecessary... try this instead for starters:


<html>
<head>

<script language="JavaScript">
<!--
// Function to validate the form.
function ProcessForm()
{

var Proceed = 1;
var Message;
var FocusField;

if (!document.Validation.Name.value)
{
Message = "You must enter your name.";
FocusField = "Name";
Proceed = 0;
}

if (document.Validation.AgeGroup.selectedIndex==0)
{
Message = "You must select your age group.";
FocusField = "AgeGroup";
Proceed = 0;
}

var Address = document.Validation.Address.value
if (Address.length==0)
{
Message = "You must enter your address.";
FocusField = "Address";
Proceed = 0;
}

var CityListLen = 4;
var SelectProceed = 0;
for (i=0; i<=(CityListLen - 1); i++)
{
if (document.Validation.City[i].selected)
{
SelectProceed = 1;
}
}
if (SelectProceed == 0)
{
Message = "You must select at least one city.";
FocusField = "City";
Proceed = 0;
}

var SkillListLen = 4;
var CheckboxProceed = 0;
for (i=0; i<=(SkillListLen - 1); i++)
{
if (document.Validation.Skill[i].checked)
{
CheckboxProceed = 1;
}
}
if (CheckboxProceed == 0)
{
Message = "You must select at least one skill.";
FocusField = "";
Proceed = 0;
}

if (document.Validation.USBorn[1].checked)
{
if (!document.Validation.CountryBorn.value)
{
Message = "If you weren't born in the US, you must enter the country in which you were born.";
FocusField = "CountryBorn";
Proceed = 0;
}
}

if (Proceed == 1)
{
alert("The form has been successfully completed.");
return true;
}
else
{
alert( Message );
if (FocusField != "")
{
eval("document.Validation." + FocusField + ".focus()");
}
return false;
}
}
//-->
</script>


</head>

<body>
<p><i>* required fields</i></p>

<FORM ACTION="http://homepages.paradise.net.nz/cgi-bin/mailto" METHOD="POST" name="Validation" onsubmit="return ProcessForm()">
<INPUT NAME="recipient" TYPE="HIDDEN" VALUE="mice@paradise.net.nz">

<p>
<table>
<tr>
<td><span class="label">Name:*</span></td>
<td><input type="text" name="Name"></td>
</tr>
<tr>
<td><span class="label">Age Group:*</span></td>
<td>
<select name="AgeGroup">
<option value="">Select Age Group

<option value="Under 18">Under 18

<option value="18-24">18-24

<option value="25-29">25-29

<option value="30-39">30-39

<option value="40 +">40 +


</select>
</td>
</tr>
<tr>
<td colspan="2"><span class="label">Address:*</span></td>
</tr>
<tr>
<td colspan="2"><textarea name="Address" cols="25" rows="3" wrap="virtual"></textarea></td>
</tr>
<tr>
<td colspan="2">
<table border="0">
<tr>
<td valign="top"><nobr><b>Select at least one city:*</b> </nobr></td>
<td valign="top"><b>Skill(s):*</b></td>
</tr>
<tr>
<td valign="top">
<select name="City" size="4" multiple>

<option value="Chicago">Chicago

<option value="Los Angeles">Los Angeles

<option value="New York">New York

<option value="Washington DC">Washington DC


</select>
</td>
<td valign="top">


<input type="checkbox" name="Skill" value="ASP">ASP<br>



<input type="checkbox" name="Skill" value="ColdFusion">ColdFusion<br>



<input type="checkbox" name="Skill" value="HTML">HTML<br>



<input type="checkbox" name="Skill" value="JavaScript">JavaScript<br>


</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><b>Were you born in the US?*</b></td>
</tr>
<tr>
<td colspan="2"><nobr><input type="radio" name="USBorn" value="1">Yes <input type="radio"

name="USBorn" value="0">No</nobr></td>
</tr>
<tr>
<td colspan="2"><b>If "No", please enter the country.</b></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="CountryBorn"></td>
</tr>
<tr>
<td colspan="2" align="center">
<table border="0">
<tr>
<td><input type="submit" value="Send booking"></td>
<td><input type="reset" value="Clear" width="75" style="width:75"></td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</form>
</body>
</html>


If that doesn't completely solve your dilemma that will get you 90% of the way there! :D
adios
08-28-2002, 12:55 AM
You forgot to return false; after the prompt & the focus(). No return value is as good as a true.
whammy
08-28-2002, 01:27 AM
You're right... but at least I got rid of a lot of other junk! I don't feel like rewriting the validation, although it really needs it... :D
sunnyview
08-28-2002, 01:46 AM
Thanks whammy. Works a treat.
adios
08-28-2002, 02:15 AM
Yo, whammy (our always-cheerful consigliere) :D ...

We crossed tracks...I was responding to sunnyview & didn't see your post so, wasn't commenting on it.

adios