JQuery驗證插件 - 如何向Title屬性添加錯誤消息？

我到處尋找這個問題的答案，雖然有很多類似的問題，但沒有一個完全像我想要的那樣工作。JQuery驗證插件 - 如何向Title屬性添加錯誤消息？

我正在使用JQuery Validator插件的網絡表單。由於設計約束，我不希望將錯誤消息追加到前一個元素。目前，我已經在使用突出顯示以及在表單底部添加摘要的方式向無效輸入添加特定類。那裏沒有問題。

但是，我發現這僅僅是不夠的，因爲用戶真的不知道爲什麼特定點是無效的。我真的沒有空間來自動顯示錯誤信息;不過，我在文檔中讀到，您可以將錯誤消息添加到title屬性，這是我想要做的。引自網站：

錯誤消息顯示用戶關於無效元素的提示，以及出錯的地方。有三種方法可以提供錯誤消息。通過輸入元素的標題屬性進行驗證，通過錯誤標籤和插件設置（選項消息）。

但是，它並未顯示如何實際將錯誤消息添加到title屬性。所以，到目前爲止，我在這種情況下可以做些什麼？

僅供參考：我意識到我將不得不添加錯誤消息，而不是以「」作爲消息。

$(document).ready(function() { 
    $("#popcornOrder").validate({ 
      rules: { 
       fName:  "required", 
       lName:  "required", 
       street:  "required", 
       city:  "required", 
       state:  "required", 
       zip:  {required: true, ziprange: true}, 
       accountNum: "required", 
       email:  {required: true, email: true}, 
       pwd:  "required", 
       confPwd: {required: true, equalTo: "#pwd"}, 
       payment: "required" 
      }, 
      messages: { 
       fName:  "", 
       lName:  "", 
       street:  "", 
       city:  "", 
       state:  "", 
       zip:  "", 
       accountNum: "", 
       email:  "", 
       pwd:  "", 
       confPwd: "", 
       payment: "" 

      }, 
      highlight: 
       function(element) { 
        $(element).addClass('errorBorder'); 
       }, 
      unhighlight: 
       function(element) { 
        $(element).removeClass('errorBorder'); 
       }, 
      invalidHandler: function(form, validator) { 
       var errors = validator.numberOfInvalids(); 
        if (errors) { 
         var message = errors == 1 
          ? 'You missed 1 field. It has been highlighted' 
          : 'You missed ' + errors + ' fields. They have been highlighted'; 
         $("div.error span").html(message); 
         $("div.error").show(); 
         } else { 
         $("div.error").hide(); 
        } 
      }, 
      focusInvalid: false 
    }); 
});

編輯：好的，我沒有得到一個更近了一步：如果我添加以下行會添加一條消息，標題屬性（這只是普通的OL JQuery的），但它增加了消息摘要所有標題。那麼，真正的問題是如何將特定的錯誤添加到每個輸入中？

$("input").attr("title", message);

來源

2011-11-18 shelzmike

您需要唯一標識輸入。

$("input[name=foo]").attr("title", message);

其中foo是輸入的名稱。我懷疑這將與違規規則的名稱（例如fName，lName等）一致。顯然你需要爲每個錯誤都做這個。

來源

2011-11-18 23:03:11 hafichuk

感謝您的答覆。我想它會這樣工作，而且我知道 - 我只是想，也許有一種更簡單的方法來做到這一點，而不是爲每個輸入寫一個。不過，我試着在代碼的最後添加以下內容，我認爲它可能會讓我更接近，但仍然沒有骰子，因爲它添加了標題（這是+1），但標題是[object Object] on每一個！'errorPlacement：function（error，element）{0} {0}}}}} \t \t \t}' – shelzmike

而不是逐個創建這些，在invalidHandler函數中，循環來自驗證器的錯誤消息並更新標題，同時用相應的消息進行更新。 – hafichuk

你試過這個嗎？

errorPlacement: 
    function(error, element) { 
     $(element).prop("title", error.text()); 
    },

，並刪除它...

unhighlight: 
    function(element) { 
     $(element).removeClass('errorBorder').prop("title", ""); 
    },

來源

2011-11-18 23:12:45 Sparky

是的，當我輸入時我很興奮，因爲我確信它會起作用。它確實有效，但只有一半。它添加了一個title屬性（因爲沒有一個硬編碼到HTML中），但是對於每個有錯誤的輸入，出於某種原因，title屬性只是[object Object]。 – shelzmike

@shelzmike，請參閱我的編輯...從jQuery 1.6開始，在幾乎所有情況下，應該使用'prop（）'來代替'attr（）'。 – Sparky

感謝您澄清。對於JQuery我還是很新的（喜歡它，但仍然在學習）。不幸的是，這仍然是通過相同的結果。添加了標題屬性，但是文本特別是[對象對象]。因此加重。 – shelzmike

JQuery驗證插件 - 如何向Title屬性添加錯誤消息？

回答

相關問題