How to show error message with checkbox when I submit form [duplicate]

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
– Mark Schultheiss, Commented Jun 1, 2018 at 10:38

Prabin Sapal · Accepted Answer · 2018-06-01 10:43:14Z

-1

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>

edited Jun 1, 2018 at 10:43

answered Jun 1, 2018 at 10:33

Prabin Sapal

3561 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Polly Over a year ago

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!

Prabin Sapal Over a year ago

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 <form method="post">

Akhil Aravind · Accepted Answer · 2018-06-01 11:50:17Z

-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 1, 2018 at 11:50

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

answered Jun 1, 2018 at 10:25

Gaurang Donga

12 bronze badges

1 Comment

Mark Schultheiss Over a year ago

Please clean this up as a working example with notes and describe what it is doing for the OP.

Collectives™ on Stack Overflow

How to show error message with checkbox when I submit form [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related