提交表单时如何显示带有复选框的错误消息

Question

I want to show error message when I click the submit button. So suppose I have 3 checkboxes: (I show one because the other are the same). Please add more code about the form. It is not debuggable at that level. I should have added this as comment, but you can see I don't have enough reputation score.

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

All checkboxes have the attribute required="required" . When I click on the submit button and the checkbox is not selected, I obtain two things:
1) I don't read anything about the "checkbox is empty" that I must read for HTML5 default validation when the attribute is required
2) I obtain this error: An invalid form control with name='privacy' is not focusable.

Anyone can help me?

Answer 1

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

Answer 2

Use checked so that it will get checked and check the following code i guess it will help you

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