jQuery验证select2.js中的errorPlacement

Question

当错误替换输入select2显示在框上方时，我希望错误替换框下方。这是我的HTML：

<form id="form" class="form_required">
    <select type="text" id="test1" class="form-control select2" required>
        <option value="">&nbsp();</option>
        <option value="1">1</option>
    </select>
    <button type="button" onclick="insert()">Submit</button>
</form>

这是JavaScript：

$('.select2').select2()

$(".form_required").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

function insert(){
    if ($('#form').valid()){
        alert('OK');
    }
}

1） 2）

当不使用select2错误替换时，将在框2下方显示错误替换，而在使用select2错误替换时，将在框上方显示错误替换。

Answer 1

如果您检查select2库的源代码，您将看到select2-container（负责select2下拉菜单的容器）被插入到select元素之后。这是执行此操作的代码部分：

Select2.prototype._placeContainer = function ($container) {
 $container.insertAfter(this.$element);

 var width = this._resolveWidth(this.$element, this.options.get('width'));

 if (width != null) {
  $container.css('width', width);
 }
};

这使我们可以轻松地将来自jquery-validate 的错误消息放置在this之后select2-container。这是errorPlacement选项的更改：

errorPlacement: function (error, element) {
    if(element.hasClass('select2') && element.next('.select2-container').length) {
        error.insertAfter(element.next('.select2-container'));
    }
    ....

还有显示结果的代码段：

Select2.prototype._placeContainer = function ($container) {
 $container.insertAfter(this.$element);

 var width = this._resolveWidth(this.$element, this.options.get('width'));

 if (width != null) {
  $container.css('width', width);
 }
};

errorPlacement: function (error, element) {
    if(element.hasClass('select2') && element.next('.select2-container').length) {
        error.insertAfter(element.next('.select2-container'));
    }
    ....

$('.select2').select2({container: 'body'})

$(".form_required").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
    		if(element.hasClass('select2') && element.next('.select2-container').length) {
        	error.insertAfter(element.next('.select2-container'));
        } else if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

希望这可以帮助。