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 with the minimal amount of code to replicate the issue and edit your question with the link. This could help:- link1 link2 — BenG
– BenG, Commented Nov 24, 2015 at 20:40

boulepick · Accepted Answer · 2015-12-06 21:57:14Z

0

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>

answered Dec 6, 2015 at 21:57

boulepick

792 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iamchriswick Over a year ago

Were you using Flat UI?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related