Home/ Questions/Q 8581667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T21:06:29+00:00

I am a beginner in jQuery and I was wondering how to validate the

  • 0

I am a beginner in jQuery and I was wondering how to validate the form before submission specifically for check boxes.

I am creating a simple check list form where my user would tick a check box if he finished that step. What I am planning to do is that, the script would prevent the form submission if there is an “unticked” checkbox and highlight it with a color.

Here’s my code :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
      .error {
        background-color: #F00;
      }
      .valid {
        background-color: #0F0;
      }
    </style>
    <script type="application/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">    </script>
    <script type="application/javascript">
      $('#button').on('click', function() {
        var $checkboxes = $('.container [type=checkbox]');

        $checkboxes.filter(':checked').parent().removeClass('error').addClass('valid');
        $checkboxes.not(':checked').parent().removeClass('valid').addClass('error');
      });
    </script>
  </head>

  <body>
    <div class="container">
      <input class="tick" id="option1" type="checkbox">
    </div>
    <div class="container">
      <input class="tick" id="option1" type="checkbox">
    </div>
    <input id="button" type="button" value="check">
  </body>
</html>

So what I am trying to do here is when the user clicks the button, the script will highlight all the unchecked check box with red and highlight all checked with green.

However, my script is not functioning. What is wrong with my script? Any suggestions on a more efficient way to do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try the following:

    $(document).ready(function(){
    var len = $('input[type=checkbox]').length;

    $('#button').click(function(e){
        var $cb = $('input[type=checkbox]');
        $cb.filter(':checked').parent().removeClass('error');
        var not = $cb.not(':checked').parent().addClass('error').length;
        if (len == not) {
            e.preventDefault(); // prevent the default action of the event
        }
    })​
})

    http://jsfiddle.net/2dcPE/

    Note that your markup is not valid, IDs must be unique.

    • 0