如何在没有提交事件的情况下显示setCustomValidity消息/工具提示

Question

我正在使用表单基本验证来检查电子邮件格式是否正确,然后数据由Ajax发送,它检查电子邮件地址是否已被使用并且用户选择国家/州或在选择框中保留默认值.

但是对于要完成的HTML5表单验证,需要提交事件,如果它通过了基本表单验证,则会执行Ajax操作,但是当结果出现时,我想使用相同的浏览器工具提示来实现界面一致性(我很好)喜欢他们的样子).

那么有没有办法让它们出现,我无法找到它们是否有某些特殊事件或者类似于触发提交事件但是立即停止它.此时,该字段仅获得红色边缘,并且鼠标悬停在其上时会显示错误消息,而工具提示再次显示单击"提交"按钮.

对于没有本机工具提示的浏览器(在我的情况下是Safari),我使用的是Webshims Lib,它的行为与Chrome和Firefox完全相同.

Answer 1

我认为.checkValidity()会做的伎俩,但它不会触发UI.

这听起来像是.reportValidity()你想要的. http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity

我不知道是否有任何浏览器实现它:

Answer 2

你可以在这个链接找到答案:如何强制html5表单验证而不通过jQuery提交

基本上,您会找到一个提交按钮并通过电话点击它:

// force form validation
document.getElementById("submitbutton").click()

您还可以在检查电子邮件地址是否正在使用后更改验证消息,然后强制执行上述表单验证:

document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()

Answer 3

一个用于HTMLFormElement.reportValidity().
使用 IE11 和 Edge 进行测试。但是当使用 IE11 在下面的 StackOverflow 沙箱中运行时，不会显示验证消息。

function reportValidityPolyfill() {
  const button = createInvisibleSubmitButton();
  this.appendChild(button);
  this.addEventListener("submit", submitEventHandler);
  var isValid = false;
  button.click();
  this.removeEventListener("submit", submitEventHandler);
  this.removeChild(button);
  return isValid;

  function createInvisibleSubmitButton() {
    const button = document.createElement("button");
    button.type = "submit";
    button.style.display = "none";
    return button;
  }

  function submitEventHandler(event) {
    event.preventDefault();
    isValid = true;
  }
}

if (!HTMLFormElement.prototype.reportValidity) {
  HTMLFormElement.prototype.reportValidity = reportValidityPolyfill;
  console.log("ReportValidity polyfill installed.");
} else {
  console.log("ReportValidity polyfill skipped.");
}

input {
  outline: 1px solid #0f0;
}

input:invalid {
  outline: 1px solid #f00;
}

<form id="form1">
  Enter a number from 1 to 5: <input type="number" min="1" max="5" required>
</form>
<br>
<div onclick="console.log('Validity: ' + document.getElementById('form1').reportValidity())">
  Click here to call reportValidity()
</div>