验证时的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弹出窗口

回答

相关问题