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