CODEWITHSUNDEEP
phpjquery
Saranya
Saranya

Reputation: 29

Validate checkbox in jquery

I have a PHP form where atleast one checkbox be selected before submitting the form. If submit is clicked without selecting atleast one checkbox, it needs an alert. Could anyone suggest me doing this in Jquery1.10.2. I tried my best in jquery, its working for me.

<script>
function onSubmit() 
{ 
  var fields = $(".chk_boxes1").serializeArray(); 
  if (fields.length == 0) 
  { 
    alert('nothing selected'); 
    // cancel submit
    return false;
  }   
}
// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)
</script>


<?php
echo '<form action="" method="post" id="subscribeForm">               
       <table>
         <tr>                                              
            <th>ROLE</th>
            <th>DESCRIPTION</th>    
            <th>PERMISSIONS<br><input type="checkbox" class="chk_boxes"></th>  
         </tr>

         <tr>
            <td><input type="text" name="role_name" required></td>
            <td><input type="text" value="" name="role_desc" required></td>
            <td><input type="checkbox" class="chk_boxes1" name="perm[]" value="0">My Account<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="1">Edit Account<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="2">Change password<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="3">List of users<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="4">Define roles<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="5">Assign roles<br>
         </td></tr></table>
         <div><input type="submit" name="new_role" value="create newrole"></div>
      </form>';
?>

Upvotes: 0

Views: 83

Answers (5)

Mad Angle
Mad Angle

Reputation: 2330

Working Code

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            var atLeastOneIsChecked = false;
            function validateForm() {
                $('input:checkbox').each(function () {
                    if ($(this).is(':checked')) {
                      atLeastOneIsChecked = true;
                    }
                });
                if (!atLeastOneIsChecked) {
                    alert("please tick any of the check boxes");
                }
                else{
                    alert("Success");
                    //submit form
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post" id="subscribeForm" onsubmit="return validateForm();">               
            <table>
                <tr>                                              
                   <th>ROLE</th>
                   <th>DESCRIPTION</th>    
                   <th>PERMISSIONS<br><input type="checkbox" class="chk_boxes"></th>  
                </tr>
                <tr>
                   <td><input type="text" name="role_name" required></td>
                   <td><input type="text" value="" name="role_desc" required></td>
                   <td><input type="checkbox" class="chk_boxes1" name="perm[]" value="0">My Account<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="1">Edit Account<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="2">Change password<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="3">List of users<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="4">Define roles<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="5">Assign roles<br>
                    </td>
                </tr>
            </table>
            <div><input type="submit" name="new_role" value="create newrole"></div>
        </form>
    </body>
</html>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try below code : you can change input type="button" instead of type="submit" and call onSubmit() function on onclick of button. And inside function check if atleast one checkbox is checked using length of checked checkboxes, if condition true then submit form otherwise show alert.

    <script>
    function onSubmit() 
    { 
      var checkedCheckbox = $(".chk_boxes1:checked").length; 
      //if no checkbox selected then show alert
      if (checkedCheckbox == 0) 
      { 
        alert('nothing selected'); 
        // cancel submit
        return false;
      }   
      else
     {
        // submit form
         $('#subscribeForm').submit();
      }

    }

    </script>


    <?php
    echo '<form action="" method="post" id="subscribeForm">               
           <table>
             <tr>                                              
                <th>ROLE</th>
                <th>DESCRIPTION</th>    
                <th>PERMISSIONS<br><input type="checkbox" class="chk_boxes"></th>  
             </tr>

             <tr>
                <td><input type="text" name="role_name" required></td>
                <td><input type="text" value="" name="role_desc" required></td>
                <td><input type="checkbox" class="chk_boxes1" name="perm[]" value="0">My Account<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="1">Edit Account<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="2">Change password<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="3">List of users<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="4">Define roles<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="5">Assign roles<br>
             </td></tr></table>
             <div><input type="button" name="new_role" value="create newrole" onclick="onSubmit()"></div>
          </form>';

?>

Upvotes: 0

insanebits
insanebits

Reputation: 838

You can try using :checked pseudo element

if($('chk_boxes1:checked').length == 0)
{
    alert('At least one checkbox has to be selected')
}

Upvotes: 0

TBI
TBI

Reputation: 2809

Firstly call the funciton in your form using onsubmit event - 

<form action="" method="post" id="subscribeForm" onsubmit="return onSubmit();">

Here is your function to validate the checkboxes

function onSubmit() {
    if ($(".chk_boxes1:checked").length < 1) {
        alert("Please select at least one checkbox.");
        return false;
    } else {
        return true;
    }
}

Upvotes: 0

lpg
lpg

Reputation: 4937

You could do it with something like this:

$("#new_role").on("click",function(){
    if($( "input:checked" ).length == 0)
        alert("You should check something");
    else
        $("#subscribeForm").submit();
});

See JSFIDDLE DEMO

Upvotes: 2

Related Questions