Validation Text Field - Baffling Problem
brian-j Jan 14, 2011 5:41 PMI've added Spry validation to a simple form -- but Text Field Validation isn't working. I'm can submit the form without filling in the required fields.
When I add Email Verification (on blur) to the email <input> field, Spry does display the error message for the email formatting if it's incorrect. But if no email is entered, the form is submitted (even through email is a required field). I've got the "Name" field as required as well, but can submit the form without entering any information.
Here's part of my html code...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<!-- begin form -->
<form action="http://www.website.com/cgi-sys/formmail.pl" method="post" class="cf-sidebar">
<input type="hidden" name="recipient" value="name@website.com" />
<input type="hidden" name="subject" value="Website Contact Form" />
<fieldset class="cf-sidebar-info">
<span id="sprytextfield-name">
<input name="name" type="text" class="fieldBox" value="Name"
onclick="if(this.value=='Name')this.value='';"
onfocus="if(this.value=='Name'){this.value='';};return false;"
onblur="if (this.value==''){this.value='Name';return false;}" />
<span class="textfieldRequiredMsg">Please enter your name.</span></span>
<span id="sprytextfield-email">
<input name="email" type="text" class="fieldBox" value="Email"
onclick="if(this.value=='Email')this.value='';"
onfocus="if(this.value=='Email'){this.value='';};return false;"
onblur="if (this.value==''){this.value='Email';return false;}" />
<span class="textfieldRequiredMsg">Please enter your email address.</span>
<span class="textfieldInvalidFormatMsg">Invalid email format.</span></span>
<input name="phone" type="text" class="fieldBox" value="Phone"
onclick="if(this.value=='Phone')this.value='';"
onfocus="if(this.value=='Phone'){this.value='';};return false;"
onblur="if (this.value==''){this.value='Phone';return false;}" />
<textarea name="message" cols="18" rows="6" class="commentBox">Message</textarea>
</fieldset>
<div class="cf-button-cont">
<input type="image" name="submit" src="images/btn_submit.gif" alt="Submit" class="cf-button" />
</div>
<input type="hidden" name="redirect" value="http://www.website.com/thankyou.html" />
</form>
<!-- / form -->
</div>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield-name");
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield-email", "email");
//-->
</script>
</body>
I've tried getting rid of the code in the form that sets the Value effects (onclick, onfocus, onblur), but that didn't do anything. I can't figure out what the heck is going on. Anybody have any ideas?
Thanks,
Brian


