Question

在我的项目中，我广泛使用select2插件，但我遇到的一个问题是影响我的表单验证逻辑的错误。

var valid = 1;

$('form .required').each(function() {
    if ($(this).val() == '') {
        $(this).parents('.form-group').addClass('has-error');
        valid = 0;
    } else {
        $(this).parents('.form-group').removeClass('has-error');
    }

    console.log($(this))
    console.log($(this).val())
});

这适用于非select2表单元素，但使用select初始化的select2被错误地标记为无效。

e.g。从上面的调试来看，select2 div导致错误，因为它没有任何价值，但实际下拉列表很好，但我没想到会发生这种情况，因为div没有value属性。

div#s2id_select2.select2-container.form-control.required.select2-allowclear
// no value

select#select2.form-control.required.select2-offscreen
// correct value

解决这个问题的一个简单方法是对select2初始化下拉列表进行特定检查，但我希望避免这种情况，以便我可以使用更通用的方法而不必担心个别情况。

Answer 1

使用Select2 4.0，.val()函数应该按您希望的方式工作，但Select2 4.0此时仍处于测试阶段。此外，它与以前的版本不向后兼容。

对于旧版本的Select2，您必须对Select2元素执行不同于其他元素的检查。您可以检查$(this).data('select2')以查看是否使用Select2检测了元素。（如果元素是Select2元素，则不会是undefined。）如果元素是Select2元素，则可以使用$(this).select2('val')来查看它是否具有值。该函数返回单个select的字符串和多个select的数组。

function isFieldEmpty(field) {
    var $field = $(field);
    if ($field.data('select2')) {
        var val = $field.select2('val');
        return $.isArray(val) ? (val.length == 0) : (val == '');
    }
    return ($field.val() == '');
}

var valid = 1;

$('form .required').each(function() {
    if (isFieldEmpty(this)) {
        $(this).parents('.form-group').addClass('has-error');
        valid = 0;
    } else {
        $(this).parents('.form-group').removeClass('has-error');
    }
});

Answer 2

我在发布问题后发现的一种方法是像这样更新选择器：

$('.create_form .required').not('.select2-container').each(function() {

但也许有更优雅的方法。

jQuery select2表单验证错误

2 个答案: