0

このエラーを理解するのに助けが必要なので、基本的に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 に対してクエリ関数が定義されていません」というエラーが表示され、他のすべてのフィールドの検証が停止します。

誰かが私がこれで間違っているところを指摘できますか?

ありがとう

4

1 に答える 1

0

この問題は、2 つのプラグイン間の非互換性に関連していました。私が使用していたselect2のバージョンでは、Selectオプションは、HTMLからの入力divを使用してSelect2によって構築されました

ただし、最初から FormValidation.io は、「input」タグがあった DOM で「select」タグを探しています。私は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>
于 2015-12-06T21:57:14.550 に答える