jQuery dynamic form validation for checkboxes

Question

I have a form that is having a number of fields and I am using the JQuery plugin from jqueryvalidation.org to do the validation. It all works fine apart from one problem.

I have a checkbox array in the form (let's say it is called music_ideas), which has three options rock, pop and jazz. I start the page with all options checked and I have a jQuery rule for the validations as follows:

'#music_ideas': { required:true, minlength: 2 }

The problem is as follows: I have an icon (a checkmark) for when the information is valid. When you click on submit the information is valid so it appears, all good. If I uncheck two of the checkboxes I would expect the checkmark to go away and be replaced by the red cross to indicate the error. This does not happen until you submit the form again and then (after the submit) dynamic validation works fine (i.e. the form is validated whenever you check/uncheck a checkbox).

Any ideas as to where I might be going wrong with this?

Regards, George

EDIT: Please find below a Minimal Working Example:

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="example.css">
  <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="jquery.validate.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $('#test_form').validate({
    success:"valid",
        rules: {
            'music_prefs[]': {
                required:true,
                minlength:2
                }
            },

        messages: {
            "music_prefs[]": {
                required: " You need to select a music idea",
                minlength: " You need to select at least two music ideas"
                }
            },
        errorPlacement: function(error, element) {
            if (element.attr("name") == 'music_prefs[]') {
                    element.parent().append(error);
                }
            else {
                error.insertAfter(element);
                }
        },
        });


        });
 </script>
</head>

<body>
<form id="test_form" action="#" method="post">
<div class="music_ideas"><label for="mi">Music Ideas:</label>
<input type="checkbox" name="music_prefs[]" id="mp1" checked value="Rock">Rock
<input type="checkbox" name="music_prefs[]" id="mp2" checked value="Pop">Pop
<input type="checkbox" name="music_prefs[]" id="mp3" checked value="Jazz">Jazz</div>
<input type="submit" name="btn_submit" value="Submit the form" id="bs">
<input type="reset" name="btn_reset" value="Clear Fields" id="br">
</form>
                </body>

</html>

The relevant lines from the CSS file are:

label.error {
    background: url('unchecked.gif') no-repeat;
}
label.error.valid {
    background: url('checked.gif') no-repeat;
        }

You'll have to post more of your code. Specifically, where are you calling validate() and what options are you passing it? Can we see your HTML markup? — James Duffy
– James Duffy, Commented Apr 27, 2014 at 11:42
Thanks James, I edited the original post to include the code you requested. — user3474704
– user3474704, Commented Apr 27, 2014 at 14:08

James Duffy · Accepted Answer · 2014-04-28 08:58:06Z

1

I think the problem here is that when the user submits the form, JQuery Validation sees that the user input is correct, and stops trying to validate the form.

However, you can force validation again by calling $("#test_form").valid().

In this case we want to check if the form is valid every time the user checks a checkbox:

$("#test_form input[type='checkbox']").change(function() {
    $("#test_form").valid();
});

JSFiddle 1: http://jsfiddle.net/qW3az/

Or if you only want the checkboxes to appear after the first time the user tries submitting the form:

$("#test_form").submit(function(e) {
    e.preventDefault();
    $("#test_form input[type='checkbox']").change(function() {
        $("#test_form").valid();
    });
});

JSFiddle 2: http://jsfiddle.net/Ydz5J/

Note: you can also call $("#test_form").valid() on $(document).ready() to show the checkbox immediately.

answered Apr 28, 2014 at 8:58

James Duffy

1,41710 silver badges17 bronze badges

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

2 Comments

user3474704 Over a year ago

Super, I will try that. Is it default behaviour though that validation works dynamically for all form elements and only checkboxes are left out (it just strikes me that I have to re-submit the form before everything starts working fine again)?

James Duffy Over a year ago

The default behavior seems to work fine for checkboxes, however it's the success: "valid" option that's not behaving as you expect. If the form is invalid the first time you submit it, it will monitor and react to your attempts to fix it. But for some reason if the checkboxes are valid the first time you submit the form, it adds the "valid" class and stops monitoring them. I agree with you that this is seems like odd logic, so you might want to report it to the plugin author as a bug.

Collectives™ on Stack Overflow

jQuery dynamic form validation for checkboxes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related