使用JQuery登錄表單驗證

我已經使用jquery完成了登錄表單驗證，但是在文本框內出現錯誤消息。任何人都可以幫助我將驗證消息放在輸入字段附近。更多信息請查看該網站。使用JQuery登錄表單驗證

http://192.168.109.1:8084/AsiaHospital/login.jsp 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <%@include file="header.jsp"%> 
    <head> 
     <style type="text/css"> 
      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; 
      } 
     </style> 
     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
     <script type="text/javascript" src="javascript/loginvalidation.js"></script> 

    </head> 
    <div id="templatemo_content_right"> 
     <h1>Login Form</h1> 
     <center> 
      <form action="LoginServlet" method="POST" id="theform" name="theform"> 
       <table cellspacing="20" cellpading="10"> 
        <tr> 
         <td>UserName:</td> 
         <td><input type="text" name="userName" id="userName"/></td> 
        </tr> 
        <tr> 
         <td>Password:</td> 
         <td><input type="password" name="password" id="password"/></td> 
        </tr> 
        <tr> 
         <td><input type="submit" value="Login"/></td> 
        </tr> 


       </table> 



      </form> 
     </center> 

     <div class="cleaner_with_height">&nbsp;</div> 

    </div> <!-- end of content right --> 
    <%@include file="footer.jsp" %> 
</html>

/* 
* 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<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"); 
     } 
    }); 
});

來源

2012-08-09 Sirojan Gnanaretnam

有一個jQuery驗證插件，您可能有興趣嘗試作爲替代HTTP：// docs.jquery.com/Plugins/Validation – nbrooks 2012-08-09 06:30:11

你喜歡看我們嗎？與那個大代碼爭鬥，複製/粘貼代碼？ – 2012-08-09 06:34:50

嘗試改變這一行，

input.val(emptyerror);

到

input.after('<span>'+emptyerror+'</span>');

來源

2012-08-09 06:38:15

使用JQuery登錄表單驗證

回答

相關問題