5 Replies Latest reply: Jan 21, 2011 3:06 PM by Ben Pleysier RSS

    Validation Text Field - Baffling Problem

    brian-j Community Member

      I'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