FormValidation with Select2 uncaught exception: query function not defined for Select2

Question

need some help figuring out this error so basically i have this in my 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>

my JS code for the FormValidation this is basically following the example in 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;
        }
    });

my Select2 data is local in the this form

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

now the page load correctly and my select2 field works ok but the validation will not work. i get an error "uncaught exception: query function not defined for Select2 prog_categ" stopping all of the other fields to be validated.

can anyone point where i'm going wrong on this?

thanks

there's too much code to replicate the issue. create a [jsfiddle](http://www.jsfiddle.net) with the minimal amount of code to replicate the issue and edit your question with the link. This could help:- [link1](http://stackoverflow.com/questions/17523227/select2-acts-very-diffrent-with-uncaught-query-function-not-defined-for-select2) [link2](http://stackoverflow.com/questions/14483348/query-function-not-defined-for-select2-undefined-error) — BenG, Nov 24 '15 at 20:40

score 0 · Accepted Answer · answered Dec 06 '15 at 21:57

The problem was linked to incompatibility between the two plugins. on the version of select2 that i was using, the Select options was built by Select2 using the input div from the HTML

however FormValidation.io from the get go is looking for a "select" tag on the DOM where i had "input" tags. i updated to the latest version of select2 where they are actually advising against using "input" but "select". So changed my code to with the latest version of Select2 and all worked ok with no errors. hope that can save someone lots of headache.

                <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>

Were you using Flat UI? – iamchriswick May 03 '16 at 06:54 — iamchriswick, May 03 '16 at 06:54

FormValidation with Select2 uncaught exception: query function not defined for Select2

1 Answers1