Question

我具有带复选框隐私策略的登录表单（必填），并且如果未选中则希望显示自定义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或edge）。场景： 1.如果一切正确并提交，则可以正常工作。 2.如果未选中然后提交，则显示弹出验证消息。但是即使检查并提交后，它仍然会显示错误消息，并且表单根本不会提交。

请帮助！

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

截图如下：

Answer 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中效果很好！

使用setCustomValidity（）

2 个答案: