使用 setCustomValidity() 时遇到特定于 IE 的 html5 验证问题答案

【问题标题】：having problem with html5 validation for IE specific when using setCustomValidity()使用 setCustomValidity() 时遇到特定于 IE 的 html5 验证问题
【发布时间】：2019-03-13 17:53:36
【问题描述】：

我有带有复选框隐私政策的登录表单（必需），如果未选中，我希望显示自定义 html5 验证消息并单击表单提交。我使用了内联javascript：

<input name="privacypolicy" title="Please agree to our privacy policy" id="privacypolicy" required="" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('Please agree to our privacy policy')" type="checkbox" value="agree">

这适用于 chrome 和 firefox。但不适用于 IE（11 或边缘）。设想： 1. 如果一切正确并提交，它就可以工作。 2. 如果没有勾选然后提交，会弹出验证信息。但是即使检查并提交后，它仍然显示错误消息并且表单根本没有提交。

请帮忙！

【问题讨论】：

标签： javascript html validation internet-explorer

【解决方案1】：

请参考以下代码，在我这边运行良好（使用 IE11 和 Chrome）

Javascript 脚本：

<script type="text/javascript">
    function page_load() {
        document.getElementById("privacypolicy").setCustomValidity("Please indicate that you accept the Terms and Conditions!");
    };
</script>

HTML代码：

<body onload="page_load();">
    <form id="form1" runat="server">
        <div>
            <p>
                <input title="Please agree to our privacy policy" required="required"
                    onchange="this.setCustomValidity(validity.valueMissing ? 'Please indicate that you accept the Terms and Conditions!!!!' : '');"
                    id="privacypolicy" type="checkbox" name="privacypolicy" />
                I accept the <u>Terms and Conditions</u>
            </p>
            <p>
                <input type="submit" />
            </p>
        </div>
    </form>
</body>

截图如下：

【讨论】：

非常好的hack，因为IE不支持caniuse.com/#search=setCustomValidity
这个问题。如何删除具有自定义有效性的字段的必需项。我收到此错误profile:1 An invalid form control with name='end_month' is not focusable.，因为当用户勾选复选框时该字段被隐藏。
@RyanAquino，如果我理解正确，您的相关字段由于某些编程条件而被隐藏或隐藏。我想说，最好的方法是确保 $('#that_field_id').attr('required", false); 当您尝试隐藏该字段时。这将使该字段免受此问题的影响。

【解决方案2】：

您是否尝试过实现自己的事件监听器？

document.addEventListener("DOMContentLoaded", function(){
  var invalid = function(e) {   
    if(e.target.validity.valueMissing){
      e.target.setCustomValidity("Please agree to our privacy policy");
      return;
    }
  };

  var privacypolicy = document.getElementsByName("privacypolicy");
  privacypolicy[0].oninvalid = invalid;
  privacypolicy[0].oninput = function(e) {
    e.target.setCustomValidity("");
  };
});

和html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Privacy Policy</title>
  </head>
  <body>
    <form action="">
      <label for="privacypolicy"> Privacy Policy </label>
      <input name="privacypolicy" id="privacypolicy" required="" type="checkbox" value="agree">
      <br/>
      <input type="submit"/>
    </form>
  </body>
</html>

不幸的是，我无法在 IE11 中测试这段代码，因为我使用的是 ubuntu，但在 chrome 中效果很好！

【讨论】：