jQuery自定義html5錯誤消息

我正在使用HTML5來驗證表單並使用 setCustomValidity更改錯誤消息文本。除了某種原因，我只是無法得到這個工作。我在控制檯或任何東西中都沒有收到錯誤消息。我正在嘗試使用「數據錯誤」屬性中的內容，並將其用作自定義錯誤消息，但無法弄清楚，因爲我已花費了數小時的時間。jQuery自定義html5錯誤消息

JQUERY

$aboutUs.find("#headerForm :input").each(function(){ 
    var $this = $(this); 
    var errorMessage = $this.attr("data-error"); 
    for (var i = 0; i < $this.length; i++) { 
    $this[i].oninvalid = function(e) { 
    e.target.setCustomValidity("test"); 
    if (!e.target.validity.valid) { 
    e.target.setCustomValidity(e.target.getAttribute(errorMessage)); 
    } 
    }; 
    }       
    });

HTML表單

<input id="firstName" type="text" required data-error="First Name Message" /> 
<input id="lastName" type="text" required data-error="Last Name Message" /> 
<input id="phone" type="text" required data-error="Phone Message" />

來源

2013-06-12 Delmon Young

人們往往喜歡從網站的其餘部分隔離的問題。這有助於精神集中。你可以製作一個包含問題行爲的jsfiddle，並通過點擊「編輯」將jsfiddle鏈接粘貼到你的問題中？如果你這樣做，有人可能會提供幫助。 http://jsfiddle.net/ – Paul

孤立地看，$ aboutUs看起來很奇怪。它是否設置在其他地方？ – Paul

你的陳述var errorMessage = $this.attr("data-error");已經得到了消息，然後你想獲得與名稱作爲該消息的屬性。 e.target.setCustomValidity(e.target.getAttribute(errorMessage));。 errorMessage在此聲明中是消息而不是屬性名稱，而不是它的消息本身。所以你的意思可能是e.target.setCustomValidity(errorMessage);

順便說一句，你可以使用$this.data("error")來檢索data-*的值，只要它不會在運行中改變。

那麼試試這個： -

$aboutUs.find("#headerForm :input").each(function(){ 
    var $this = $(this); 
    var errorMessage = $this.data("error"); 
    for (var i = 0; i < $this.length; i++) { 
    $this[i].oninvalid = function(e) { 
    if (!e.target.validity.valid) { 
      e.target.setCustomValidity(errorMessage); 
    } 
    }; 
    }       
    });

由於您使用jQuery的只是簡化此：這裏

$aboutUs.find("#headerForm :input").on('invalid', function (e) { 
    var errorMessage = $(this).data("error"); 
    e.target.setCustomValidity(""); 
    if (e.target.validity.valueMissing) { 
     e.target.setCustomValidity(errorMessage); 

    } 

});

來源

2013-06-12 02:47:50 PSL

感謝您的回覆，但我迷失了這不適合我。如果我試圖在這個** $ this [i] .oninvalid = function（e）{**我沒有得到任何東西。 –

什麼時候調用了'$ this [i] .oninvalid'處理函數？ – PSL

我甚至不確定它是否是。我對jquery很新，我將如何檢查並調用它？ –

jQuery自定義html5錯誤消息

回答

相關問題