title: Login Form Validation Using JQuery
body: <p>I Have done a login form validation using jquery, But Thing is error message come inside the text box. can any one help me to put the validation message near the input field. For More information pl Check that Site.</p>
  
  <pre><code>http://192.168.109.1:8084/AsiaHospital/login.jsp
  
  
  
   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;%@include file="header.jsp"%&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              body, input, textarea {
                  font-size:12px;
                  line-height:18px;
                  font-family:Verdana, Geneva, sans-serif;
              }
  
  
              #error {
                  color:#dd4466;
                  font-size:10px;
                  display:none;
              }
              .needsfilled {
                  background:#958585;
                  color:white;
              }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascript/loginvalidation.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;div id="templatemo_content_right"&gt;
          &lt;h1&gt;Login Form&lt;/h1&gt;
          &lt;center&gt;
              &lt;form action="LoginServlet" method="POST" id="theform" name="theform"&gt;
                  &lt;table cellspacing="20" cellpading="10"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;UserName:&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="userName" id="userName"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Password:&lt;/td&gt;
                          &lt;td&gt;&lt;input type="password" name="password" id="password"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="submit" value="Login"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
  
  
                  &lt;/table&gt;
  
  
  
              &lt;/form&gt;
          &lt;/center&gt;
  
          &lt;div class="cleaner_with_height"&gt;&amp;nbsp;&lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- end of content right --&gt;
      &lt;%@include file="footer.jsp" %&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>    /* 
   * To change this template, choose Tools | Templates
   * and open the template in the editor.
   */
  
  
  $(document).ready(function(){
      // Place ID's of all required fields here.
      required = ["userName", "password"];
  
      // If using an ID other than #email or #error then replace it here
      email = $("#email");
      errornotice = $("#error");
      // The text to show up within a field when it is incorrect
      emptyerror = "Please fill out this field.";
      emailerror = "Please enter a valid e-mail.";
  
      $("#theform").submit(function(){    
          //Validate required fields
          for (i=0;i&lt;required.length;i++) {
              var input = $('#'+required[i]);
              if ((input.val() == "") || (input.val() == emptyerror)) {
                  input.addClass("needsfilled");
                  input.val(emptyerror);
                  errornotice.fadeIn(750);
              } else {
                  input.removeClass("needsfilled");
              }
          }
          // Validate the e-mail.
  
          //if any inputs on the page have the class 'needsfilled' the form will not submit
          if ($(":input").hasClass("needsfilled")) {
              return false;
          } else {
              errornotice.hide();
              return true;
          }
      });
  
      // Clears any fields in the form when the user clicks on them
      $(":input").focus(function(){       
         if ($(this).hasClass("needsfilled") ) {
              $(this).val("");
              $(this).removeClass("needsfilled");
         }
      });
  });
  </code></pre>