关于javascript：如何在不提交事件的情况下显示setCustomValidity消息/工具提示


How to show setCustomValidity message/tooltip without submit event

我正在使用表单基本验证来检查电子邮件的格式是否正确，然后由Ajax发送数据，并在其中检查电子邮件地址是否已被使用，以及用户是否在选择框中选择了国家/地区或默认值。

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

因此，有没有办法让他们出现，我无法找到是否有针对他们的特殊事件或诸如触发Submit事件但立即将其停止的事件。现在，该字段仅显示一个红色边缘，并且将鼠标悬停在该字段上时会显示错误消息，而再次单击"提交"按钮则会显示工具提示。

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

我以为.checkValidity()可以解决问题，但不会触发UI。 (我可以用吗)

听起来.reportValidity()可以满足您的要求。 (我可以用吗)

相关讨论

您可以在以下链接找到答案：如何在不通过jQuery提交的情况下强制进行html5表单验证

基本上，您会找到一个提交按钮，然后单击它：

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

您还可以在检查电子邮件地址是否已使用之后更改验证消息，然后按上述方式强制进行表单验证：

1
2
document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
相关讨论

HTMLFormElement.reportValidity()的polyfill。
经过IE11和Edge测试。但是，当在下面的IE11的StackOverflow沙箱中运行时，不会显示验证消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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.");
}
1
2
3
4
5
6
7
input {
  outline: 1px solid #0f0;
}

input:invalid {
  outline: 1px solid #f00;
}
1
2
3
4
5
6
<form id="form1">
  Enter a number from 1 to 5: <input type="number" min="1" max="5" required>
</form>


  Click here to call reportValidity()

实际上非常简单-在表单中添加一个隐藏的输入元素：

1
<input type="hidden" id="myFormCheck" required="true" value=""/>

在要创建自定义工具提示的输入元素上调用myInputField.setCustomValidity(message)，然后调用form.click();

表单有效性过程运行并在该元素上显示消息弹出窗口，但是由于隐藏元素，该表单不会提交，因此您无需捕获和取消Submit事件。

完成并真正准备好使用后，在隐藏元素上设置一个值，表单将正常提交。

这样，您可以将表单工具提示用于诸如检查可用的用户名或与HTTP Request上的任何值进行匹配等操作。

正如大多数人所说，您必须使用input.setCustomValidity("message")。

这里的问题是，您无法在submit事件中检查验证，因为您需要执行ajax调用，然后异步设置setCustomValidity。

因此，基本上，您必须使用输入字段的change事件并在每次更改时进行ajax调用。或者删除提交按钮，并使用普通按钮的click事件，检查ajax调用中的唯一电子邮件，然后通过javascript调用提交。

查看使用jQuery的最后一个选项的示例：

1
2
3
4
<form action="/sign-in" id="form">
    <input type="email" id="email" required/>
    <button id="submit">Submit</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// we capture the click instead the submit
$("#submit").on("click",function(){
    var $elem = $("#email");
    var email = $elem.val();

    //the ajax call returns true if the email exists
    $.get("ajax/checkUniqueEmail", function(data) {
        if(data ==="true"){
            $elem.setCustomValidity("This email already exists.");
        }else{
            $elem.setCustomValidity("")
        }
        //then we submit the form
        $("#form").submit();
    });
});

签出此链接(使用HTML 5页面中的setCustomValidity提供自定义验证消息)。

在上面的链接中，他使用的"输入"类型是数字，在输入时他称为验证函数。让我知道这是您要寻找的东西。

1
<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
相关讨论

这是一个不错的实时示例，自定义可验证/提供有关表单输入的反馈。

基本的javascript如下所示：

1
2
3
4
5
6
7
8
9
10
function checkPasscode() {
    var passcode_input = document.querySelector("#passcode");

    if (passcode_input.value !="Ivy") {
        passcode_input.setCustomValidity("Wrong. It's 'Ivy'.");
    } else {
        passcode_input.setCustomValidity(""); // be sure to leave this empty!
        alert("Correct!");
    }
}

HTML：

1
2
3
4
5
6
7
8
9
<form>
    <label for="passcode">Enter Passcode:</label>
    <input id="passcode"
           type="password"
           placeholder="Your passcode"
           oninput="checkPasscode();"
           required/>
    <button type="submit">Submit</button>
</form>
相关讨论

如果条件为假，则可以将setCustomValidity用于该元素(可以在任何事件处理程序(例如keypress或click)内进行操作。如果输入无效，则提交。这将触发浏览器的消息工具提示。