Jquery驗證成功函數沒有清除重新驗證的有效標籤？

我有一個使用JQuery Validate插件來驗證數據的表單。對於用戶名字段（但不是我表格上的其他字段），如果用戶名可用，我想在字段旁邊顯示「用戶名可用」。Jquery驗證成功函數沒有清除重新驗證的有效標籤？

我有這個幾乎工作。唯一有問題的是，當用戶在輸入有效值後編輯用戶名時，以前的有效郵件永遠不會被刪除，所以在字段旁邊顯示「用戶名可用的用戶名」或「用戶名可用的用戶名可用的用戶名可用「等。

當我重新驗證這個字段時，需要做些什麼改變才能刪除以前的」用戶名可用「信息？

我的jQuery的成功函數如下：

$("form").validate({ 
     success: 
      function(label) { 

       if (label.attr('for') == "username") { 
        var element = '#' + label.attr('for'); 
        label.removeClass("error").addClass("valid").text("Username available"); 
       } else { 
        label.removeClass("error"); 
       } 


     } 
    }); 

    $("#regForm").validate(); 
});

來源

2011-05-09 Jessica Brown

似乎有一對夫婦類似的插件。你能否提供某種特定插件的鏈接？ – Eduardo 2011-05-09 21:35:56

Edward，請參閱http://stackoverflow.com/tags/jquery-validate/info ;-) – 2011-05-10 00:25:14

我終於明白自己了。查看validate插件的源代碼，如果從有效標籤中刪除「error」類，則標籤在重新驗證時不會被重用，而是會創建一個新標籤。

所以我的解決方法是從我的成功函數中刪除.removeClass（），並修改我的樣式表的有效類以使用！important重寫錯誤類中不同的項。

新驗證功能：

$("form").validate({ 
    success: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.addClass("valid").text("Username available"); 
      } else { 
       label.addClass("invisiblevalid"); //ie. hide 
      } 


    } 
}); 

$("#regForm").validate();

}）;

修改的樣式表的代碼：

label.error { 
background: url('check.gif') no-repeat; 
color: #FF0000; 
} 
label.valid { 
background: url('check.gif') no-repeat !important; 
color: #339900 !important; 
} 
label.invisiblevalid { 
display: none !important; 
}

來源

2011-05-10 19:20:16

我建議你不要使用'！important'，這是不推薦的。一旦你使用它，你就不能在沒有另一個重要的情況下改變它。正如那句老話：「如果你使用！重要，你做錯了」。 – 2012-07-11 16:18:51

它是不太理想的使用！重要的是，我會同意，如果你有如何改善CSS使其工作，而不使用！的重要覆蓋優先規則的破解工作，我全部耳朵 – 2012-07-12 21:28:20

我有同樣的問題是，當發生'重新驗證'（用戶編輯字段的內容）時，標籤最終會有兩個類，'error'和'success'像這樣：'此字段是必填項。'。那麼會發生什麼情況是，現在有錯誤的字段的標籤將採用「.valid」中的樣式，因爲'.valid'正在使用'！important'。沒有辦法讓插件交換'error'和'success'類，而不是在初始驗證發生之後總是離開這兩個類。 – 2013-02-14 20:06:37

我不知道到底是哪插件，您正在使用。但我想它應該看起來像這樣。

$("form").validate({ 
    success: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.removeClass("error").addClass("valid").text("Username available"); 
      } else { 
       label.removeClass("error"); 
      } 


    }, 
    error: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.addClass("error").removeClass("valid").text("Username unavailable"); 
      } else { 
       label.addClass("error"); 
      } 


    } 
}); 

$("#regForm").validate();

來源

2011-05-09 21:39:36 Eduardo

我繼續前進並嘗試了您的解決方案，但它對validate插件的行爲不起作用或沒有任何影響，看起來像我從我在插件的文檔中讀到的東西所期望的那樣工作。但是，無論如何感謝您嘗試幫助 – 2011-05-09 21:52:26

其實我不認爲你要等到形式重新驗證，你應該設定成磁場本身的功能，所以當以往用戶改變您刪除用戶名可用的消息文本但是如果你經常驗證，你就不必擔心這一點。

您的JavaScript看起來不錯，但您需要確保使用jQuery文本正確設置了HTML，並且標籤看起來不像下面這樣會導致問題。

<label id="myLabel"></label>

在jQuery頁面here的評論中有一個簡短註釋。

來源

2011-05-10 05:50:55

它最初是在失去焦點時進行驗證，然後在每次按鍵時重新進行驗證。你的解決方案實際上並沒有直接解決我的問題，因爲標籤格式正確，但是當我開始查看生成的標籤源代碼以查看它們是否正確生成時，我想到了插件源代碼看看這些標籤是如何生成的，這引起了我注意的一面紅旗：如果標籤具有與其關聯的「錯誤」類，則該標籤僅被重新使用。感謝您在尋找工作解決方案方面的幫助，我現在已經創建了工作代碼！ – 2011-05-10 19:25:53

我找到了解決辦法。

基本上，如果您的CSS沒有更新後添加您的類有效，這是類規則沒有被覆蓋。爲什麼？問題不在於JavaScript方面，而在於您的CSS。您的有效類必須的Error類後聲明....

我花了2小時尋找關於JS的問題，但它是在CSS ....哎呀....

來源

2013-03-03 00:12:09 momo

Jquery驗證成功函數沒有清除重新驗證的有效標籤？

回答

相關問題