我用jQuery驗(yàn)證插件來驗(yàn)證我的表單。我用jQuery select2插件改變了下拉菜單的樣式。如果驗(yàn)證回調(diào)錯(cuò)誤，我的輸入顯示/添加類錯(cuò)誤框(紅色邊框)，否則顯示/添加類成功框(綠色邊框)。這在正常輸入中有效，但在select2中無效。當(dāng)我為選擇框選擇任何值時(shí)，錯(cuò)誤框(紅色邊框)不隱藏/切換到成功框。選擇2個(gè)工作后點(diǎn)擊提交按鈕。

JS:

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>')
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa icon-plane icon-2x  form-control-feedback"></i>');
        }
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
$("#lstColors").select2({
    placeholder: "Select a Color",
    width: "200px"
});

如何解決這個(gè)問題？！

演示:http://jsfiddle.net/hTPY7/1413/

jquery.validate沒有注意到select2發(fā)生了變化。雖然我不確定為什么會(huì)出現(xiàn)這種情況，但是您可以通過記錄表單提交的時(shí)間來解決這個(gè)問題(可能通過將類“submitted”應(yīng)用于用戶提交的任何表單):

$('form').submit(function() { 
    $(this).addClass('submitted');
});

然后調(diào)用$()。當(dāng)select2更改時(shí)，valid()導(dǎo)致jquery.validate重新驗(yàn)證表單:

$('#lstColors').change(function() {
    if ($('form').hasClass('submitted'))
        $('form').valid();
});

下面是一個(gè)jsFiddle fork，它可以正常工作: http://jsfiddle.net/Tdafh/1/