How to show error message with checkbox when I submit form

Question

I want to show an error message when I click the submit button. So suppose I have 3 checkboxes (I show only one here because the other are the same):

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

I don't read anything about the "checkbox is empty" that I must read for HTML default validation when the attribute is required
I obtain this error:

An invalid form control with name='privacy' is not focusable.

Can someone help me?

"I want to show error message when I click the submit button." Show how you did that in your code. "Please add more code about the form" yes, do that. — Mark Schultheiss, Jun 01 '18 at 10:38

score -1 · Answer 1 · edited Jun 01 '18 at 11:50

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

edited Jun 01 '18 at 11:50

Akhil Aravind

5,741
16
35

answered Jun 01 '18 at 10:25

Gaurang Donga

1
2

1

Please clean this up as a working example with notes and describe what it is doing for the OP. – Mark Schultheiss Jun 01 '18 at 10:39

Prabin Sapal · Answer 2 · 2018-06-01T10:43:14.593

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>

Thanks for your code, but it's not correct because I must create a privacy policy field so the user must check the checkbox. I can't show user all checkboxes just selected! — Polly, Jun 01 '18 at 10:35
Yeah i got it Basically it shouldn't show the error please check my above code again and try submitting the last submit it is working fine. Please try using — Prabin Sapal, Jun 01 '18 at 10:45

How to show error message with checkbox when I submit form

2 Answers2