2013-03-02 9 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