驗證時的jQuery彈出窗口

我在asp.net中有一個用戶名和密碼文本框。我想在點擊登錄按鈕之前檢查它。目前，我沒有幾個問題。驗證時的jQuery彈出窗口

我檢查用戶名和密碼是否爲空，然後顯示一條消息（「需要用戶名和密碼」）。問題是，即使用戶名和密碼不是空的，並且在我輸入內容時它不會清除，該消息也會出現。
第二個問題是，我想在一個jQuery的彈出窗口中顯示該消息（而不是我正在使用的淡入效果）。

下面的代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      var userName = $('#user').val(); 
      var passWord = $('#password').val(); 
      if ($.trim(userName) == "" || $.trim(passWord) == "") 
      { 
       $('.error').fadeIn(100); 
       return false; 
      } 

     }); 
    });

這裏的HTML：

<div class="login"> 
     <div class="error" style="display:none">Username and password are required</div></br> 
      <input type="text" id ="user" placeholder="username" name="user"><br> 
      <input type="password" id ="pass" placeholder="password" name="password"><br> 
      <input type="button" value="Login" id="submit"> 
    </div>

Here is JsFiddle

我如何能解決這個問題有什麼建議？

來源

2014-07-21 smr5

您的密碼選擇器是錯誤的。它的ID是#pass，但在你的jQuery中輸入「password」。所以它在嘗試驗證時總是空的。

另外，您可以在執行驗證之前每次隱藏錯誤消息。

$(document).ready(function() { 
      $('#submit').click(function() { 
       var userName = $('#user').val(); 
       var passWord = $('#pass').val(); 
       $('.error').hide(); 
       if ($.trim(userName) == "" || $.trim(passWord) == "") { 
        $('.error').fadeIn(100); 
        return false; 
       } 
      }); 
});

http://jsfiddle.net/nLGRa/

對於彈出，你可以使用jQuery UI的對話框： http://jqueryui.com/dialog/#default

來源

2014-07-21 19:44:42 Edward

謝謝愛德華。 – smr5

首先，作爲清除錯誤消息，當您輸入的時候，你可以添加一個Jquery 'focusin' Event是目標兩個輸入字段，這將隱藏消息

$('#user, #pass').focusin(function() { 
    //Hide my error message 
});

其次，我不會推薦使用模式來提醒用戶某個字段是錯誤的。這將是一種討厭。我通過經驗說話。您需要儘可能方便用戶使用。我會建議下列之一：

更改輸入字段中的文本顏色（例如：紅色）
改變輸入框的邊框顏色
旁邊顯示輸入字段的唯一信息（例如：所需的用戶名）

來源

2014-07-21 19:48:01 IndieRok

變化 <input type="password" id ="pass" placeholder="password" name="password"><br>

到 <input type="password" id ="password" placeholder="password" name="password"><br>

來源

2014-07-21 19:49:59 racecarjonathan

驗證時的jQuery彈出窗口

回答

相關問題