validate chosen select menu on change

Question

I have chosen dropdown on page. I use jquery validation plugin to validate the field. But when changing the chosen dropdown validation is not being fired. Also is there any method to add error class in chosen dropdown. fiddle

$('.chosen').chosen()
$.validator.setDefaults({
    submitHandler: function() {
      return false
    },ignore: ":hidden:not(select)"
  });


$("#myform").validate({
        onfocusout: function (element) {
        $(element).valid();
      },     
      rules: {
        country:"required"      
      },
      messages: {        
        country:"please choose country"       
      }
    });

Did you look at [this](http://stackoverflow.com/questions/11232310/how-can-i-use-jquery-validation-with-the-chosen-plugin?rq=1)? — Ryley, Apr 08 '15 at 15:32
Yes I did. But I want to fire validation when user change the dropdown value — Jitender, Apr 08 '15 at 17:49

score 1 · Accepted Answer · answered Apr 07 '15 at 19:29

This is because you are setting your element validation in the onfocusout method

onfocusout: function (element) {
    $(element).valid();
  },

But this event never triggers because the plugin you are using for the select hides the select and replaces it with a div element (for UI purposes). Therefore, when you select a value from the select you are focusing the div select and not the input (the input never gains focus because the selected value gets updated via javascript).

You need to create a new event listener that triggers the validation when the input changes (see fiddle) an alternative would be to force the select focusout inside the change event.

You are pure genius. – Antoine Meltzheim Mar 04 '18 at 11:40 — Antoine Meltzheim, Mar 04 '18 at 11:40

validate chosen select menu on change

1 Answers1