Check Atleast One Checkbox Is Checked On Form Submission

I have a form that consists of checkbox fields, now on form submission we should check whether atleast one checkbox is checked html code

Solution 1:

You shouldn't attach JavaScript event directly in the HTML, this is a really bad practice. Instead, because you use jQuery, you should use jQuery event handler :

$('#form_check').on('submit', function (e) {
  if ($("input[type=checkbox]:checked").length === 0) {
      e.preventDefault();
      alert('no way you submit it without checking a box');
      returnfalse;
  }
});

(http://jsbin.com/IXeK/1/edit)

If you really want to use HTML onsubmit, even if it's bad (and you should feel bad just by thinking of it), the onsubmit should be:

• attached to the form
• should prevent the default event on submit
• return false

So it covers everything. Like here http://jsbin.com/IXeK/2/edit

<form onsubmit="return atleast_onecheckbox(event)" id="form_check"class="form" action="/path/to/some/url" method="POST">
 <divclass="check_fields"><inputclass="select-unselect"type="checkbox"name="invite"value=""></div><inputtype="submit"class="btn btn-primary"value="Submit" />

functionatleast_onecheckbox(e) {
  if ($("input[type=checkbox]:checked").length === 0) {
      e.preventDefault();
      alert('no way you submit it without checking a box');
      returnfalse;
  }
}

Solution 2:

<scripttype="text/javascript">functionatleast_onecheckbox()
        { 
         if (document.getElementById('invite').checked) {
            alert('the checkbox is checked');
            }
         else
           {
          alert("please check atleast one..");
          returnfalse;
           }    
        }   
 </script><formid="form_check"class="form"action="/path/to/some/url"method="POST">
  {% for field in fields %}
  <divclass="check_fields"><inputclass="select-unselect"type="checkbox"name="invite"id="invite"value="">
      {{field}}
 </div>
 {% endfor %} 
 <inputtype="submit"class="btn btn-primary"value="Submit"onclick=" return  atleast_onecheckbox()"/></form>

Share