37

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

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

那么有没有办法让它们出现，我无法找到它们是否有一些特殊事件或类似触发提交事件但立即停止它的东西。现在该字段只有一个红色边缘，并且在将鼠标悬停在它上面时会出现错误消息，而工具提示会在再次单击提交按钮时显示。

同样对于没有本机工具提示的浏览器（在我的情况下是 Safari），我使用的是 Webshims Lib，它的作用与 Chrome 和 Firefox 中的完全相同。

4

9 回答 9

53

我认为.checkValidity()可以解决问题，但它不会触发 UI。（犬）

这听起来像.reportValidity()你想要的。（犬）

于 2014-01-30T13:39:40.763 回答
12

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

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

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

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

document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
于 2012-12-13T18:22:59.740 回答
4

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

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

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

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

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

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

于 2014-07-03T11:14:53.820 回答
4

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

于 2017-10-31T19:21:03.750 回答
3

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

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

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

查看使用 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();
    });
});
于 2015-06-15T09:43:35.580 回答
1

签出此链接（在 HTML 5 页面中使用 setCustomValidity 提供自定义验证消息）。

在上面的链接中，他使用“输入”类型是数字，并且在输入上他调用了验证函数。让我知道这就是你要找的东西。

<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
于 2012-10-19T10:16:35.493 回答
1

这是一个很好的实时示例，可以自定义验证/提供对表单输入的反馈。

基本的 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>
于 2017-08-28T18:00:05.903 回答
0

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

于 2013-01-15T08:12:35.670 回答
0

setCustomValidity() 可以解决我的更改密码，确认密码输入。

但问题是当我们设置 setCustomValidity('Passwords do not match) 时，它并不清楚附加到表单提交事件。

我刚刚在密码确认输入按键事件中将 setCustomValidity('') 添加到空白。

这个对我有用。

 $(document).ready(function() {
            const confirm = document.querySelector('input[name=password2]');
            $('#pass2').on('keyup', function(){
                confirm.setCustomValidity('');
            })
            $("#reset-pw-form").on('submit', function(e) {
                e.preventDefault();
                if($('#pass1').val() != $('#pass2').val())  {
                    confirm.setCustomValidity('Passwords do not match');
                    confirm.reportValidity();
                    return false;
                }

}

于 2021-09-07T10:29:20.527 回答