CODEWITHSUNDEEP
jqueryvalidationcheckbox
user3474704
user3474704

Reputation: 67

jQuery dynamic form validation for checkboxes

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;
        }

Upvotes: 0

Views: 1362

Answers (1)

James Duffy
James Duffy

Reputation: 1387

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.

Upvotes: 1

Related Questions