提交表单时如何使用复选框显示错误消息

Question

我想在单击提交按钮时显示错误消息。所以假设我有 3 个复选框：（我显示一个是因为另一个是相同的）。 请添加有关表单的更多代码。它在该级别不可调试。我应该将此添加为评论，但您可以看到我没有足够的声誉分数。

<label>
     <input type="checkbox"  name="privacy" value="1" id="privacy" required="required" >
      <span class="text-gray" style="font-size: 12px;"> 
        <a href="/privacy-policy/" target="_blank">Privacy</a>
      </span>
</label>

所有复选框都有属性 required="required" 。当我单击提交按钮且未选中复选框时，我得到两件事：
1) 我没有阅读任何关于“复选框为空”的内容，当需要属性时，我必须阅读 HTML5 默认验证
2) 我收到此错误：名称='privacy' 的无效表单控件不可聚焦。

有人可以帮助我吗？

Answer 1

使用检查，以便它会被检查并检查以下代码我想它会帮助你

$(document).ready(function() {
    $("#submit").click(function() {
    var chkinput = document.getElementById("privacy");
        if (chkinput.checked) {
            alert("Checked!");
        }
        else {
        	alert ("Not checked");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
     <input type="checkbox"  name="privacy" value="1" id="privacy" checked>
      <span class="text-gray" style="font-size: 12px;"> 
        <a href="/privacy-policy/" target="_blank">Privacy</a><br/>
        <button id="submit">Submit</button>
      </span>
      </form>

<form method="post">
 <input type="checkbox"  name="privacy" value="1" id="privacy1" required="required">
  <span class="text-gray" style="font-size: 12px;"> 
    <a href="/privacy-policy/" target="_blank">Privacy</a><br/>
    <button>Submit</button>
  </span>
  </form>

Answer 2

 <script type="text/javascript">

  function checkForm(form)
  {

    if(!form.terms.checked) {
      alert("Please indicate that you accept the Terms and Conditions");
      form.terms.focus();
      return false;
    }
    return true;
  }

</script>

<form  onsubmit="return checkForm(this);">

<p><input type="checkbox" name="terms"> I accept the <u>Terms and Conditions</u></p>
<p><input type="submit"></p>
</form>