jquery.validation select option dropdown validation

jquery.validation select option dropdown validation

Hello,
   I am utilizing the jquery.validation plugin. I am having problems trying to get a select option dropdown menu to show the success checkmark glyphicon on keyup (immediate positive feed back) like other inputs (all other input types work as expected). I would like for the validator to show the checkmarks as soon as a selection is made. The dropdown looks like the following;


  1.                                               <li class="cc_expiration_box">
                                                        <select id="cc_month_select" name="cc_month_select" class="creditcard_monthlist_text clearcardinfo" required>
                                                            <option value="" selected="selected">Month</option>
                                                            <option value="jan" >January</option>
                                                            <option value="feb">February</option>
                                                            <option value="mar">March</option>
                                                            <option value="apr">April</option>
                                                            <option value="may">May</option>
                                                            <option value="jun">June</option>
                                                            <option value="jul">July</option>
                                                            <option value="aug">August</option>
                                                            <option value="sep">September</option>
                                                            <option value="oct">October</option>
                                                            <option value="nov">November</option>
                                                            <option value="dec">December</option>
                                                        </select>
                                                    </li>
                                                    <li class="cc_expiration_box">
                                                        <select id="cc_year_select" name="cc_year_select" class="creditcard_yearlist_text clearcardinfo" required>
                                                            <option value="" selected="selected">Year</option>
                                                            <option value="year2019">2019</option>
                                                            <option value="year2020">2020</option>
                                                            <option value="year2021">2021</option>
                                                            <option value="year2022">2022</option>
                                                            <option value="year2023">2023</option>
                                                            <option value="year2024">2024</option>
                                                            <option value="year2025">2025</option>
                                                            <option value="year2026">2026</option>
                                                          </select>
                                                    </li>



The jquery.validate code is as follows;

  1. <script>   
        $().ready(function() {
           
            // validate the comment form when it is submitted
            $.validator.setDefaults( {
                submitHandler: function() {
                //$(form).submit();
                }
            });
                   
            // validate signup form on keyup and submit
                $("#gc_cc_payment").validate( {
                   
                    rules: {
                        gc_creditcard_name_field: {
                            required: true,
                            pattern: "^[a-zA-Z_' '.]*$",
                            minlength: 2,
                            minWords: 2
                        },

                        gc_creditcard_number_field: {
                            required: true,
                            creditcard: true
                        },
                       
                        cc_month_select: {
                          required: true
                        },
                       
                        cc_year_select: {
                          required: true
                        },
                       
                        creditcardcvc_field: {
                            required: true,
                            digits: true,
                            maxlength: 3,
                            minlength: 3
                        },
                       
                        agree: "required",
                    },

                    messages: {
                        gc_creditcard_name_field: "Please enter name<br>as it appears<br>on card",

                        gc_creditcard_number_field: "Please enter valid<br>card number",
                       
                        creditcardcvc_field: "Please enter valid<br>cvc or cvv number",
                       
                        cc_month_select: "Please select<br>expiration month",
                       
                        cc_year_select: "Please select<br>expiration year",
                                               
                        agree: "Please accept our policy",

                        topic: "Please select at least 2 topics",
                    },               
                   
                    onfocusout: function(element) {
                        if (!this.checkable(element)) {
                            this.element(element);
                        }
                    },
                   
                    onkeyup: function(element) {
                        if (!this.checkable(element)) {
                            this.element(element);
                        }
                    },

                    ignore: ".ignore, :hidden",

                    errorElement: "span",

                    errorPlacement: function (error, element) {
                        var type = $(element).attr("type");
                        if (type === "radio") {
                            // custom placement
                            error.insertAfter(element).wrap('<li/>');
                        } else if (type === "checkbox") {
                            // custom placement
                            error.insertAfter(element).wrap('<li/>');
                        } else {
                            error.insertAfter(element).wrap('<li/>');
                        }
                    },

                    success: function ( li, element, validClass ) {
                        // Add the span element, if doesn't exists, and apply the icon classes to it.
                        if ( !$( element ).next( "span" )[ 0 ] ) {
                            $( '<span class="glyphicon glyphicon-ok form_control_feedback"></span>' ).insertAfter($( element ));                       
                        }                   
                    },               
                   
                    highlight: function ( element, errorClass, validClass ) {
                        $( element ).parents( ".cc_validation_field" ).removeClass( "has-success" );
                        $( element ).next( "span" ).removeClass( "active_cc" );
                        if ( !$( element ).next( "span" )[ 0 ] ) {
                            $( '<span class="glyphicon glyphicon-ok form_control_feedback"></span>' ).insertAfter($( element ));                       
                        }
                    },

                    unhighlight: function ( element, errorClass, validClass ) {
                        $( element ).parents( ".cc_validation_field" ).addClass( "has-success" ).removeClass( "has-error" );
                        $( element ).next( "span" ).addClass( "glyphicon-ok glyphicon form_control_feedback active_cc" ).removeClass( "glyphicon-remove" );
                    },

                    showErrors: function (errorMap, errorList) {
                        this.defaultShowErrors();
                    },
                });
                   
        });   
    </script>
I have attempted to condense it a little. Please forgive me if it is lengthy. I am a relative newbie so please be patient with me. Thanks for any help you can afford me.