带有 Select2 未捕获异常的 FormValidation：未为 Select2 定义查询函数

Posted 2023-05-07

【中文标题】带有 Select2 未捕获异常的 FormValidation：未为 Select2 定义查询函数

【英文标题】：FormValidation with Select2 uncaught exception: query function not defined for Select2

【发布时间】：2016-02-27 10:44:46

【问题描述】：

需要一些帮助来找出这个错误，所以基本上我在 我的 HTML 中有这个

<div class="form-group">
    <div class="col-xs-3">
        <label class="control-label">Category</label>
    </div>
    <div class="col-xs-9">
        <input id="prog_categ" name="category" class="form-control" required='required' placeholder="-Select Category-">
    </div>
</div>

我的 FormValidation 的 JS 代码基本上遵循 http://formvalidation.io/examples/select2/ 中的示例：

$('#newProgram')
    // IMPORTANT: You must declare .on('init.field.fv')
    // before calling .formValidation(options)
    .on('init.field.fv', function(e, data) 
        var $parent = data.element.parents('.form-group'),
            $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + data.field + '"]');
        $icon.on('click.clearing', function() 
            // Check if the field is valid or not via the icon class
            if ($icon.hasClass('glyphicon-remove')) 
                // Clear the field
                data.fv.resetField(data.element);
            
        );
    )
    //Revalidate the category when it is changed
    .find('[name="category"]')
    .select2()
    .change(function(e) 
        $('#newProgram').formValidation('revalidateField', 'category');
    ).end()
    .formValidation(
        framework   : 'bootstrap',
        excluded    : [':disabled'],
        addOns      : 
            i18n    : ,
            // mandatoryIcon: 
                // icon:'fa fa-asterisk'
            // ,
            icon: 
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            
        ,
        fields: 
            category: 
                validators: 
                    callback: 
                        message: 'Please choose 2-4 color you like most',
                        callback: function(value, validator, $field) 
                            // Get the selected options
                            var options = validator.getFieldElements('category').val();
                            return (options != null && options.length >= 2 && options.length <= 4);
                        
                    
                
            ,
        
    )
    .on('success.form.fv', function(e) 
        var $form        = $(e.target),     // Form instance
            //Get the clicked button
            $button      = $form.data('formValidation').getSubmitButton(),
            //You might need to update the "status" field before submitting the form
            $statusField = $form.find('[name="publishStatus"]');

        //To demonstrate which button is clicked,
        //You might don't need to use it in real application
        switch ($button.attr('id')) 
            case 'publishButton':
                $statusField.val('publish');
                    alert('The article will be published');
                break;

            case 'draftButton':
                $statusField.val('draft');
                    alert('The article will be saved as a draft');
                break;

            case 'editButton':
                $statusField.val('edit');
                    alert('The article will be saved as a draft');
                break;
            default:
                $statusField.val('unpublished');
                    alert('The article will be saved');
               break;
        
    );

我的 Select2 数据在此表单中是本地的

["id":"1","text":"categ1","id":"2","text":"categ2","id":"3","text":"categ3",....].

现在页面加载正确，我的 select2 字段工作正常，但验证不起作用。我收到一个错误“未捕获的异常：未为 Select2 prog_categ 定义查询函数”停止所有其他要验证的字段。

谁能指出我在这方面出了什么问题？

谢谢

【问题讨论】：

复制问题的代码太多。使用最少的代码创建一个jsfiddle 来复制问题并使用链接编辑您的问题。这可能会有所帮助：- link1 link2

【参考方案1】：

问题与两个插件之间的不兼容有关。在我使用的 select2 版本上，Select 选项是由 Select2 使用 html 中的输入 div 构建的

然而，FormValidation.io 从一开始就是在 DOM 上寻找一个“选择”标签，而我有“输入”标签。我更新到最新版本的 select2，他们实际上建议不要使用“输入”而是“选择”。 所以将我的代码更改为使用最新版本的 Select2 并且一切正常，没有错误。希望可以省去很多麻烦。

                <div class="form-group">
                    <label class="control-label"></label>
                    <select id="categ" name="category" class="form-control select2" required='required' style="width: 100%"'>
                        <option></option>
                    </select>
                </div>

【讨论】：

你使用的是平面 UI 吗？