CODEWITHSUNDEEP
jqueryvalidationknockout.jsjquery-select2
user6858313
user6858313

Reputation: 1

Knockout validation with select2

I am trying to use knockout validation library along with a select2 control. The validation rule is firing properly but the error label is assigned to the underlying plain select control which is of course hidden in the select2 context. So there is no red border visible to the user to indicate the validation error.

The submit error handling in the form is working perfectly, so this is only a visualization issue. Is there any way to attach the error label to the visible part of the select2 control?

Here is my relevant code snippet:

<select multiple="true" data-bind="select2: { dropdownAutoWidth: false, width: '300px', data: myOptions}, selectedOptions: selectedOptions"></select>


        ko.validation.rules['minArrayLength'] = {
            validator: function (obj, params) {
                return obj.length >= params.minLength;
            },
            message: "Array does not meet minimum length requirements"
        };

        ko.validation.registerExtenders();

        model.selectedOptions = ko.observableArray([]).extend({
            minArrayLength: {
                params: { minLength: 1 }, message: 'Please specify at least one error code.', onlyIf: function () {
                    return self.evaluation() == 'Not OK';
                }
            }
        });

Upvotes: 0

Views: 393

Answers (1)

Shahin Dohan
Shahin Dohan

Reputation: 6907

I don't know if this will help you, but it might help someone else wandering the internet. I was trying to get knockout validation to look nice with select2 and managed to do it like this:

<div class="form-group" data-bind="validationOptions: {insertMessages: false}, 
                                   validationElement: selectedProduct">
    <label>Product</label>
    <select id="product-search" data-bind="value: selectedProduct"></select>
    <span class="help-block" data-bind="validationMessage: selectedProduct"></span>
</div>

The relevant parts are insertMessages: false and the last span element. The form-group class can be removed, it's from the bootstrap library.

I'm using the Knockout Validation library.

Upvotes: 1

Related Questions