jQuery validation plugin not validating pre-filled select

Question

I have a very strange issue with the jQuery Validation plugin where it won't validate a select that was pre-filled then modified.

You can look at the code here: http://jsfiddle.net/VwRJ8/1/

The code never fires the alert() in the following lines:

$('#edit_loc_save').click(function() {
    var foo = $('#add_new_loc_form').valid();
    alert(foo);
});

Answer 1

You can check if the select is valid each time the value is changed:

Javascript

$('#myform').validate();
$('#myselectbox').on('change', function() {
    $(this).valid();
});

Demo

Edit 1

Here is what is causing an error in your javascript, which is preventing the validate function to operate correctly:

new_loc_zip: {
    required: true,
    postalcode: true // This is not a correct setting in jquery validate
},

If you remove the postalcode: true line, validate will call properly.

Demo

Answer 2

if you want to do the validation while changing the option, then try to handle the change event of the select option and trigger the validation programatically

Try something like this

$(document).ready(function() {
        $('#myselectbox').change(function() {
              $('#myform').validate({
                            rules: {
                              myselectbox: {required: true }
                            }
                          }).form();
                       });
                    });​

See the fiddle : here

Answer 3

http://jsfiddle.net/YRAga/2/

$('#myform').validate({
    rules: {
        myselectbox: {
            required: true
        }
    }
});

$("#myselectbox").change(function() {
    $("#myform").submit();
});​