How is the `unhighlight` of JQuery.Validation called?

Question

How is the unhighlight of JQuery.Validation called?

I have a form which Im validating. Im catching all that should be caught (ip, phone, email)

but for some reason 2 of my dropdowns <select> which are automatically converted to Select2 boxes are not so friendly.

Open the form. Click save. and all the bubbles pop up to say which or what is wrong.

Start filling them in and they start to disappear as you enter valid values.

How-ever with the Select2 boxes this does not happen.

 jQuery(function($) { var validator = $('#form').validate({ rules: { x: { required: true } }, messages: {}, errorPlacement: function(error, element) {}, highlight: function(element, errorClass, validClass) { var v = $(element).val(); $(element).siblings(".err").addClass('bubble'); if (v == '') { $(element).siblings(".err").html('Required field') } if (v != '') { $(element).siblings(".err").html('Please check format') } }, unhighlight: function(element, errorClass, validClass) { $(element).siblings(".err").removeClass('bubble'); $(element).siblings(".err").html('') } }); }); 

 form { margin-top: 30px; } input.myerror { margin-top: 23px; border: 1px solid red; } .yellow { color: yellow; } .bubble { position: relative; width: 140px; height: 20px; padding: 0px; background: #FBFFC7; border: #b4b833 solid 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px 0px rgba(255, 0, 34, 0.78); -moz-box-shadow: 0px 1px 3px 0px rgba(255, 0, 34, 0.78); box-shadow: 0px 1px 3px 0px rgba(255, 0, 34, 0.78); margin-left: 70px; margin-bottom: -15px; text-align: center; font-size: 11px; color: darkred; margin-top: -5px; padding-top: 2px; padding-left: 10px; margin-left: 90px; margin-bottom: -17px; } .bubble:after { content: ""; position: absolute; bottom: -14px; left: 15px; border-style: solid; border-width: 14px 9px 0; border-color: #FBFFC7 transparent; display: block; width: 0; z-index: 1; } .bubble:before { content: ""; position: absolute; top: 20px; left: 15px; border-style: solid; border-width: 14px 9px 0; border-color: #b4b833 transparent; display: block; width: 0; z-index: 0; } 

 <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script> <script src="//cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.js"></script> <form id="form" method="post" action=""> <div> <div class="err"></div> <label class=''>Test</label> <input name="x" class="myerror" /> </div> <input type="submit" class="button" value="Submit" name='button' /> </form> 

View on JSFiddle

Answer 1

Try to have a change event handler where you manually calls the .valid() like

$('select').select2({}).on("change", function (e) {
    $(this).valid()
})

Demo: Fiddle

_{Note: Not sure why it happening, just a workaround}