title: Form Validation Without using Plugin - Problem
body: <p>I really don't wanna use a Plugin to validate my form but for some reason it is not working:</p>
  
  <p>My JS is:</p>
  
  <pre><code>function postregform() {
   var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;   
    var name = $('#name').val();var email = $('#email').val();var text = $('#textarea').val(); var text2 = $('#textarea2').val();var tooln = $('#tools').val();
  if (name.value=='') { 
     $('#error-container').delay.(200).animate({'top' : '4px'}, 400)
        $('#error-container').delay(3700).animate({'top' : '-70px'}, 400);
     return false; 
    }
  if (email.value=='') { 
      $('#error-container2').delay(200).animate({'top' : '4px'}, 400);
        $('#error-container2').delay(3700).animate({'top' : '-70px'}, 400);           
      return false;
       }
     if (! emailPattern.test(email.value)) { 
     $('#error-container3').delay(200).animate({'top' : '4px'}, 400);
        $('#error-container3').delay(3700).animate({'top' : '-70px'}, 400);                    
       return false;                   
     }
         if (text.value=='') { 
           $('#error-container4')delay(200).animate({'top' : '4px'}, 400);
        $('#error-container4').delay(3700).animate({'top' : '-70px'}, 400);           
      return false;
                             }
          if (text.value.length &lt; 10) { 
           $('#error-container5').animate({'top' : '4px'}, 400);
        $('#error-container5').delay(3700).animate({'top' : '-70px'}, 400);           
      return false;
                            }
         if (text2.value.length &lt; 10) { 
           $('#error-container6').delay(200).animate({'top' : '4px'}, 400);
        $('#error-container6').delay(3700).animate({'top' : '-70px'}, 400);           
      return false;
                             }
         if (tooln.value.length &lt; 10) { 
           $('#error-container7').delay(200).animate({'top' : '4px'}, 400);
        $('#error-container7').delay(3700).animate({'top' : '-70px'}, 400);           
      return false;
      }
  }
  </code></pre>
  
  <p>My HTML forms:</p>
  
  <pre><code>&lt;div id="bug_form"&gt;
  &lt;form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I35/" onSubmit="return postregform();"&gt; 
  
    &lt;label for="yola_form_widget_I35_0"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Name&lt;/label&gt;  &lt;br&gt;
  
                                      &lt;input id="yola_form_widget_I35_0" class="text" id="name" name="name" type="text" value=""&gt; 
                          &lt;!--name="0&amp;lt;text&amp;gt;"--&gt;
                  &lt;input type="hidden" name="0&amp;lt;label&amp;gt;" value="Name"&gt; 
  
                      &lt;br&gt;&lt;br&gt;
                                                            &lt;label for="yola_form_widget_I35_1"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Email&lt;/label&gt;  &lt;br&gt;
  
                                      &lt;input id="yola_form_widget_I35_1" class="text" id="email" name="email" type="text" value=""&gt; 
  
                  &lt;input type="hidden" name="1&amp;lt;label&amp;gt;" value="Email"&gt; 
  
                      &lt;br&gt;&lt;br&gt;
                                                        &lt;label for="yola_form_widget_I35_2"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Tool with Bug&lt;/label&gt;  
                          &lt;br&gt;                    
                                      &lt;select id="yola_form_widget_I35_2" name="2&amp;lt;list&amp;gt;"&gt; 
                                                      &lt;option value="Script Encode"&gt;Script Encoder&lt;/option&gt; 
                                                      &lt;option value="Color Picker"&gt;Color Picker&lt;/option&gt; 
                                                      &lt;option value="Linear"&gt;Linear&lt;/option&gt; 
                                                      &lt;option value="Text Properties"&gt;Text Properties&lt;/option&gt; 
                                                      &lt;option value="Box Properties"&gt;Box Properties&lt;/option&gt; 
                                                      &lt;option value="Transform Properties"&gt;Transform Properties&lt;/option&gt; 
                                                      &lt;option value="Position Changer"&gt;Position Changer&lt;/option&gt; 
                                                      &lt;option value="Code Previewer"&gt;Code Previewer&lt;/option&gt; 
                                              &lt;/select&gt; 
  
                  &lt;input type="hidden" name="2&amp;lt;label&amp;gt;" value="Tool with Bug"&gt; 
  
                      &lt;br&gt;&lt;br&gt;
                                                            &lt;label for="yola_form_widget_I35_3"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Bug Description&lt;/label&gt;&lt;br&gt;  
  
                                      &lt;textarea id="yola_form_widget_I35_3" cols="18" rows="8" id="textarea" name="textarea"&gt;&lt;/textarea&gt; 
  
                  &lt;input type="hidden" name="3&amp;lt;label&amp;gt;" value="Bug Description"&gt; 
  
  
              &lt;input type="hidden" name="redirect" value="?formI35Posted=true"&gt; 
              &lt;input type="hidden" name="redirect_fail" value="?formI35PostFailed=true"&gt; 
              &lt;input type="hidden" name="form_name" value="Report Bug"&gt; 
              &lt;input type="hidden" name="site_name" value="YolaTools"&gt; 
                          &lt;input type="hidden" name="destination" value="49FVJQi6Aiw6w5NTMAH7HuUGK-JH4UzV6JUV6gTwCHYgMQ==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM="&gt; 
  
                              &lt;p&gt;&lt;input class="submit" type="submit" value="Submit" onSubmit="return postregform();"&gt;&lt;/p&gt; 
  
  
      &lt;/form&gt;
    &lt;span style="cursor:pointer;" onclick="bugg_out();"&gt;Close[X]&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="request"&gt;
  
      &lt;form method="post" action="http://forms.yola.com/formservice/en_US/8a4986cb2437dfa701243c302c29582d/8a4986ca315350c601315d9a956b19db/8a4986ca315350c601315d9a95b919dc/I39/" onSubmit="return postregform(this);"&gt; 
  
  
  
                                                         &lt;label for="yola_form_widget_I39_0"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Name&lt;/label&gt; &lt;br&gt;
  
                                      &lt;input id="yola_form_widget_I39_0" class="text" name="name" type="text" value=""&gt; 
  
                  &lt;input type="hidden" name="0&amp;lt;label&amp;gt;" value="Name"&gt; 
          &lt;br&gt;&lt;br&gt;
                      &lt;label for="yola_form_widget_I39_1"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Email&lt;/label&gt;
                 &lt;br&gt;                             
                                      &lt;input id="yola_form_widget_I39_1" class="text" name="email" type="text" value=""&gt; 
  
                  &lt;input type="hidden" name="1&amp;lt;label&amp;gt;" value="Email"&gt; 
  
  
  &lt;br&gt;                &lt;br&gt;   
        &lt;label for="yola_form_widget_I39_2"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Tool Name&lt;/label&gt;
                     &lt;br&gt;                 &lt;input id="yola_form_widget_I39_2" class="text" id="tools" name="tooln" type="text" value=""&gt; 
  
                  &lt;input type="hidden" name="2&amp;lt;label&amp;gt;" value="Tool Name"&gt; 
  
                      &lt;br&gt;&lt;br&gt;
                                                            &lt;label for="yola_form_widget_I39_3"&gt;&lt;span style="color:red;"&gt;*&lt;/span&gt; Tool Description&lt;/label&gt;  
                                              &lt;br&gt;
                                      &lt;textarea id="yola_form_widget_I39_3" cols="18" rows="8" id="textarea2" name="textarea1"&gt;&lt;/textarea&gt; 
  
                  &lt;input type="hidden" name="3&amp;lt;label&amp;gt;" value="Tool Description"&gt; 
  
  
              &lt;input type="hidden" name="redirect" value="?formI39Posted=true"&gt; 
              &lt;input type="hidden" name="redirect_fail" value="?formI39PostFailed=true"&gt; 
              &lt;input type="hidden" name="form_name" value=""&gt; 
              &lt;input type="hidden" name="site_name" value="YolaTools"&gt; 
                          &lt;input type="hidden" name="destination" value="rcUO3XKWbMU_mNgysHPcPO_RNeKhSrMC9HNguOCTusNvKg==:d19AMmhdrSbCjBPC3ewkoW7pAqRJ0REkf9OJAJQrqlM="&gt; 
  
                              &lt;p&gt;&lt;input class="submit" type="submit" value="Submit"&gt;&lt;/p&gt; 
  
  
      &lt;/form&gt; 
    &lt;span style="cursor:pointer;text-align:center;" onclick="reque_out();"&gt;Close[X]&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Errors:</p>
  
  <pre><code>&lt;!-- Start Errors --&gt;
  &lt;div id="error-container"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Name is Required&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  
  &lt;div id="error-container2"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Email is Required&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  
  &lt;div id="error-container3"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Invalid Email&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  
  &lt;div id="error-container4"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Bug Description is Required&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  
  &lt;div id="error-container5"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Min. Lenght for Bug Description is 10&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  
  &lt;div id="error-container6"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Min. Lenght for Tool Description is 10&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  
  &lt;div id="error-container7"&gt;  
   &lt;div class="error-box"&gt; 
     &lt;span id="forgot" style="color:red;font-weight:bold;"&gt;Tool Name is Required&lt;/span&gt; 
  &lt;div class="chat-bubble-arrow"&gt;&lt;/div&gt;&lt;div class="chat-bubble-arrow-border"&gt;&lt;/div&gt; 
  &lt;/div&gt;&lt;/div&gt; 
  &lt;!-- End Error --&gt;
  </code></pre>
  
  <p>And not to forget the CSS:</p>
  
  <pre><code> .top_bottom{
      color:white;
     background: #2580bc; /* Old browsers */
  background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
      padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
    }
    .top_bottom:hover{
      color:white;
      background: #2580bc; /* Old browsers */
  background: -moz-linear-gradient(top, #2580bc 0%, #0084d1 53%, #0678d6 55%, #2b94e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(53%,#0084d1), color-stop(55%,#0678d6), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #2580bc 0%,#0084d1 53%,#0678d6 55%,#2b94e5 100%); /* W3C */ 
      padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
    }
    .top_bottom:active{
      color:white;
     background: #2580bc; /* Old browsers */
  background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
      padding:15px;border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;-o-border-radius:9px;
    }
     #bug_form, #request {
      position:absolute;
      font-size:15px; 
      top:-530px;
      right:463px; 
      border-bottom-left-radius:20px;
  -moz-border-radius-bottomleft:20px;
  -webkit-border-bottom-left-radius:20px;
  -o-border-bottom-left-radius:20px;
     border-bottom-right-radius:20px;
  -moz-border-radius-bottomright:20px;
  -webkit-border-bottom-right-radius:20px;
  -o-border-bottom-right-radius:20px;
      padding:10px;
      z-index:900;color:black;
       background: #2580bc; /* Old browsers */
  background: -moz-linear-gradient(top, #2580bc 0%, #2989d8 50%, #218fd3 52%, #2b94e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2580bc), color-stop(50%,#2989d8), color-stop(52%,#218fd3), color-stop(100%,#2b94e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2580bc', endColorstr='#2b94e5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #2580bc 0%,#2989d8 50%,#218fd3 52%,#2b94e5 100%); /* W3C */ 
      padding:15px;
    }
      #error-container, #error-container2, #error-container3,  #error-container4, #error-container5, #error-container6, #error-container7 {position:fixed;top:-70px;right:36px;}
    .error-box {background-color:#FFDBE0;border:2px solid red;font-size:13px;line-height:1.3em;margin:10px auto;padding:10px;position:relative;text-align:center;width:270px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 5px #888888;-webkit-box-shadow:0 0 5px #888888;box-shadow:0 0 5px #88888;}
    .chat-bubble-arrow-border {border-color:transparent  transparent red transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-21px;right:30px;z-index:1;}
  .chat-bubble-arrow {border-color:transparent  transparent #FFDBE0 transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;top:-19px;right:30px;z-index:5;}
  </code></pre>
  
  <p>This code might seem kinda crazy but I just don't like using Validation Plugins.
  Please Help</p>