Simple JavaScript Checkbox Validation

Question

I usually work with PHP so sadly don t have some basic JS principles down   This is all I want to accomplish--I ve seen many posts on this topic but they are usually beyond what I need   Here is my form     lt input type  checkbox  name  checkbox  value  check     gt    lt input type  submit  name  email submit  value  submit  onclick  ----  ----     gt    The checkbox is a simple  I agree    I want the submit button to be pressed and it will only submit if that check box is selected   Here s the thing   I want the simple  cheating way -- no methods -- just some inline code in that form  assuming its not overly long     This is not a public page  I just need something quick and simple with that type of validation   If its unchecked  it will throw an alert    if its checked it will submit via post through php and go on as normal

User · Answer

You can do the following    lt form action     onsubmit  if document getElementById  agree   checked    return true    else   alert  please agree    return false     gt       lt input type  checkbox  name  checkbox  value  check  id  agree    gt       lt input type  submit  name  email submit  value  submit    gt   lt  form gt     Here is a working demo - http   jsfiddle net Ccr2x

User · Answer

Another Simple way is to create  amp  invoke the function validate   when the form loads  amp  when submit button is clicked  By using checked property we check whether the checkbox is selected or not  cbox 0  has an index 0 which is used to access the first value  i e Male  with name  gender   You can do the following    x000D   x000D  function validate     x000D    var cbox   document forms  myForm    gender    x000D    if   x000D      cbox 0  checked    false  amp  amp  x000D      cbox 1  checked    false  amp  amp  x000D      cbox 2  checked    false x000D        x000D      alert  Please Select Gender    x000D      return false  x000D      else   x000D      alert  Successfully Submited    x000D      return true  x000D      x000D    x000D   lt form onload  return validate    name  myForm  gt  x000D     lt input type  checkbox  name  gender  value  male  gt  Male x000D   x000D     lt input type  checkbox  name  gender  value  female  gt  Female x000D   x000D     lt input type  checkbox  name  gender  value  other  gt  Other  lt br gt  x000D   x000D     lt input type  submit  name  submit  value  Submit  onclick  validate    gt  x000D   lt  form gt  x000D   x000D   x000D    Demo  CodePen

User · Answer

You can do something like this    lt form action       onsubmit  return checkCheckBoxes this    gt       lt p gt  lt input type  CHECKBOX  name  MyCheckbox  value  This     gt  This    lt  p gt       lt p gt  lt input type  SUBMIT  value  Submit   gt  lt  p gt   lt  form gt    lt script type  text javascript  language  JavaScript  gt   lt  -- function checkCheckBoxes theForm        if       theForm MyCheckbox checked    false                 alert   You didn  t choose any of the checkboxes             return false        else               return true            -- gt   lt  script gt     http   lab artlung com validate-checkbox   Although less legible imho  this can be done without a separate function definition like this    lt form action       onsubmit  if  this MyCheckbox checked    false    alert   You didn  t choose any of the checkboxes     return false    else   return true     gt       lt p gt  lt input type  CHECKBOX  name  MyCheckbox  value  This     gt  This    lt  p gt       lt p gt  lt input type  SUBMIT  value  Submit   gt  lt  p gt   lt  form gt

User · Answer

For now no jquery or php needed  Use just  required  HTML5 input attrbute like here    lt form gt           lt p gt               lt input class  form-control  type  text  name  email    gt               lt input type  submit  value  ok  class  btn btn-success  name  submit    gt               lt input type  hidden  name  action  value  0    gt           lt  p gt           lt p gt  lt input type  checkbox  required name  terms  gt I have read and accept  lt a href     gt SOMETHING Terms and Conditions lt  a gt  lt  p gt    lt  form gt    This will validate and prevent any submit before checkbox is opt in  Language independent solution because its generated by users web browser

User · Answer

Another simple way is to create a function and check if the checkbox es  are checked or not  and disable a button that way using jQuery   HTML     lt input type  checkbox  id  myCheckbox    gt   lt input type  submit  id  myButton    gt    JavaScript   var alterDisabledState   function       var isMyCheckboxChecked       myCheckbox   is   checked          if  isMyCheckboxChecked            myButton   removeAttr  disabled                 else                   myButton   attr  disabled    disabled               Now you have a button that is disabled until they select the checkbox  and now you have a better user experience  I would make sure that you still do the server side validation though

User · Answer

var confirm document getElementById  confirm   value           if  confirm checked  false                      alert  plz check the checkbox field             document getElementbyId  confirm   focus             return false

User · Answer

Guys you can do this kind of validation very easily  Just you have to track the id or name of the checkboxes  you can do it statically or dynamically    For statically you can use hard coded id of the checkboxes and for dynamically you can use the name of the field as an array and create a loop   Please check the below link  You will get my point very easily   http   expertsdiscussion com checkbox-validation-using-javascript-t29 html  Thanks

User · Answer

You could use    if  this form checkbox checked        alert  You must agree to the terms first         return false       demo page     lt input type  checkbox  name  checkbox  value  check     gt   lt input type  submit  name  email submit  value  submit  onclick  if  this form checkbox checked  alert  You must agree to the terms first    return false      gt     Returning false from an inline event handler will prevent the default action from taking place  in this case  submitting the form     is the Boolean NOT operator  this is the submit button because it is the element the event handler is attached to   form is the form the submit button is in   checkbox is the control named  checkbox  in that form   checked is true if the checkbox is checked and false if the checkbox is unchecked

User · Answer

If the check box s ID  Delete  then for the  onclick  event of the submit button the javascript function can be as follows   html   lt input type  checkbox  name  Delete  value  Delete  id  Delete  gt  lt  td gt   lt input type  button  value  Delete  name  delBtn  id  delBtn  onclick  deleteData    gt   script   lt script type  text Javascript  gt      function deleteData             if  document getElementById  Delete   checked               alert  Checkbox not checked                return false             lt  script gt

User · Answer

var testCheckbox   document getElementById  checkbox      if   testCheckbox checked      alert  Error Message        else     alert  Success Message

User · Answer

If your checkbox has an ID of  checkbox     if document getElementById  checkbox   checked    true      code here     HTH

[javascript] Simple JavaScript Checkbox Validation

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to validation