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

您可以在以下链接找到答案：How to force a html5 form validation without submitting it via jQuery

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

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

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

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

Answer 3

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

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

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

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

当你完成并准备好后，在隐藏元素上设置一个值，表格将正常提交。

通过这种方式，您可以使用表单工具提示来检查可用的用户名，或通过HTTP请求等匹配任何值。

Answer 4

结帐此链接（Provide custom validation messages using setCustomValidity in HTML 5 pages）。

在上面的链接中，他使用“输入”类型是数字和输入，他称之为验证功能。让我知道这就是你要找的东西。

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

Answer 5

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

＆＃13;

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.");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

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

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

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

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

<form action="/sign-in" id="form">
    <input type="email" id="email" required/>
    <button id="submit">Submit</button>
</form>

// 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();
    });
});

Answer 7

如果条件为false，您可以对元素使用setCustomValidity（您可以在任何事件处理程序（如按键或单击）中执行此操作）。如果输入无效，则提交。这将触发浏览器的消息工具提示。

Answer 8

Here's a nice live example该自定义验证/提供表单输入的反馈。

基本的javascript看起来像：

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：

<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消息/工具提示

8 个答案: