javascript - Form validation not working with <select>s -

i have javascript code checks if fields in form filled, if not pops bootstrap alert using jquery. works fine text inputs, when checking selects, fires error, if option filled.

javascript code:

$(document).ready(function () {     $('form[name="register"]').on("submit", function (e) {         var username = $(this).find('input[name="username"]');         var preferredclass = $(this).find('input[name="preferredclass"]');          if ($.trim(username.val()) === "" || ($.trim(preferredclass.val())) === "") {             e.preventdefault();             $("#formalert").slidedown(400);         } else {             $("#formalert").slideup(400, function () {});         }     });      $(".alert").find(".close").on("click", function (e) {         e.stoppropagation();         e.preventdefault()         $(this).closest(".alert").slideup(400);     }); }); 

the entire code , (kind of) working example can found in jsfiddle.

you have wrong selector select

replace this

var preferredclass = $(this).find('input[name="preferredclass"]'); 

with this:

var preferredclass = $(this).find('select[name="preferredclass"]'); 

working demo