2013-03-02 177 views
0

我是新的Jquery。jquery验证无法正常工作

通过google搜索我做了以下代码不工作。

我有txtLogin文本框和btnLogIn按钮。

我在尝试简单的事情。 如果这个文本框是空的,那么错误信息应该显示在lblLoginError中。

以下是代码:

$(document).ready(function() { 
     $('#btnLogIn').click(function() { 
      var LoginId = $("#txtLogin").val(); 
      if ($("#txtLogin").val() == "") { 

       $("#lblLoginError").text("Please Enter Login Id"); 

       return false; 
      } 
      else { 
       $("#lblLoginError").text(""); 
       return true; 
      } 

     }); 
    }); 

我的问题是>>第一次,当文本框为空,我就点击链接它给我的错误信息上拉布勒[根据代码它工作正常。

第二次当我在文本框中输入任何东西,然后按下按钮,然后删除错误信息。[根据代码,这也很好]。

但第三次当我删除输入的文本,然后按下按钮,然后它不会显示我的错误消息。

*注意:我正在使用.NET在那个AJAX UPDATE面板中。页面不会每次刷新。 有什么问题?

+0

它正在为我工​​作 – PSR 2013-03-02 06:30:53

+0

@PSR:你有没有尝试第三次案件? – Freelancer 2013-03-02 06:31:48

+0

是的,我试过了。在你的代码中创建一个jsFiddle链接 – PSR 2013-03-02 06:32:19

回答

1

它是非常useful链接,jQuery验证

例子:

<script> 
    $(document).ready(function(){ 
    $("#commentForm").validate(); 
}); 
</script> 

<form id="commentForm"> 
    <input type="text" id="txtLogin" class="required"/> 
    <input class="submit" type="submit" value="Submit"/> 
</form> 

在这里您可以根据需要只应用类。

+0

谢谢,我正在经历它。 – Freelancer 2013-03-02 07:01:39

+0

如果你有解答这个答案,请标记为答案:) – PSR 2013-03-02 07:03:25

0

尝试这种方式,可能是一些空间剩下的字符数第3次的,要做到这一点所以最好的办法是在这里:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
     $('#btnLogIn').click(function() { 
      var LoginId = $("#txtLogin").val(); 
      if ($("#txtLogin").val().trim() == "") { 

       alert($("#txtLogin").val()); 
       $("#lblLoginError").text("Please Enter Login Id"); 

       return false; 
      } 
      else { 
       $("#lblLoginError").text(""); 
       return true; 
      } 

     }); 
    }); 
</script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <input type='text' id='txtLogin' /> 
    <input type='button' id='btnLogIn' value="Sign In"/> 
    <p id='lblLoginError'></p> 

</body> 
</html> 

通知的if ($("#txtLogin").val().trim() == "")trim()将消除空间字符\

这里。是它的实时网址:http://jsbin.com/igoceg/2/edit

我希望这个帮助,让我知道如果问题仍然存在。

+0

是的,它会在链接上正常工作。我真正的问题是,因为我使用的是Ajax更新面板,所以每次页面都不会刷新。在你提供的链接上,当我按下按钮时,页面被刷新,这就是为什么它起作用 – Freelancer 2013-03-02 06:41:44

+0

好吧,现在我已经在本地文件中创建了它,这次它不刷新,我正在更新代码,你可以复制它,保存为.html然后检查机器,看看这是否正常工作。 – 2013-03-02 06:48:16