如何從 JavaScript 函數手動顯示 HTML5 驗證消息？

Question

我想知道是否有任何方法可以使用 JavaScript 函數以編程方式顯示 HTML5 驗證錯誤。

這對於必須檢查電子郵件重復的情況很有用。 例如，一個人輸入一封電子郵件，按下提交按鈕，然后必須通知該電子郵件已被注冊或其他什么。

我知道還有其他方法可以顯示此類錯誤，但我想以與顯示驗證錯誤消息的方式相同的方式顯示它（例如，無效的電子郵件、空字段等）。

JSFiddle： http : //jsfiddle.net/ahmadka/tjXG3/

HTML 表單：

<form>
    <input type="email" id="email" placeholder="Enter your email here..." required>
    <button type="submit">Submit</button>
</form>

<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>

JavaScript：

function triggerCustomMsg()
{
    document.getElementById("email").setCustomValidity("This email is already used");

}

上面的代碼設置了自定義消息，但它不會自動顯示。 它僅在用戶按下提交按鈕或其他東西時顯示。

Answer 1

您現在可以使用 HTMLFormElement.reportValidity() 方法，目前它已在除 Internet Explorer 之外的大多數瀏覽器中實現（請參閱 MDN 上的瀏覽器兼容性）。 它在不觸發提交事件的情況下報告有效性錯誤，它們以相同的方式顯示。

Answer 2

var applicationForm = document.getElementById("applicationForm");    
if (applicationForm.checkValidity()) {
  applicationForm.submit();
} else {
  applicationForm.reportValidity();
}

reportValidity() 方法將觸發 HTML5 驗證消息。

Answer 3

這個問題是一年多前提出的，但這是我最近遇到的一個好問題......

我的解決方案是使用 JavaScript 在包含validationMessage的每個<input> 、 <select>和<textarea>的<label>上創建一個屬性（我使用“data-invalid”）。

然后一些CSS...

label:after {
    content: attr(data-invalid);
   ...
}

... 顯示錯誤消息。

限制

這僅適用於每個元素都有一個標簽。 如果將屬性放在元素本身上，它將不起作用，因為<input>元素不能有:after偽元素。

演示

http://jsfiddle.net/u4ca6kvm/2/

Answer 4

正如@Diego 所提到的，您可以使用 form.reportValidity();
為了支持 IE 和 Safari 包含這個 polyfill，它可以正常工作：

if (!HTMLFormElement.prototype.reportValidity) {
    HTMLFormElement.prototype.reportValidity = function() {
      if (this.checkValidity()) return true;
      var btn = document.createElement('button');
      this.appendChild(btn);
      btn.click();
      this.removeChild(btn);
      return false;
    }
}