form validation not removing error message from bootstrap multiselect dropdown

Question

I am using bootstrap multiselect dropdown with jQuery form validator plugin. When I submit the form, form validator shows error message. But even after I select any item in the multiselect dropdown, the error messages not removed until I resubmit the form. How could I fix it?

jQuery('#availablePositions').multiselect({
    nonSelectedText: 'Select positions',
    includeSelectAllOption: true,
    includeSelectAllIfMoreThan: 5,
    selectAllText: 'Select all positions',
    maxHeight: 300,
    buttonWidth: '100%',

});

<tbody id="tb_position_list">
    <tr>
        <td class="qa-form-tall-data has-error">
            <select id="availablePositions" class="multiselect form-control error" name="positions[]" multiple="multiple" 
                    data-validation="required" data-validation-error-msg="Position required" style="display: none; border-color: red;" 
                    current-error="Position required">
                <option value="1">Full width - Top of page</option>
                <option value="2">Full width - Below navigation</option>
                <option value="3">Full width - Below content</option>
            </select>
            <div class="btn-group" style="width: 100%;">
                <button type="button" class="multiselect dropdown-toggle btn btn-default" 
                        data-toggle="dropdown" title="Select positions" style="width: 100%;">Select positions <b class="caret"></b>
                </button>
                <ul class="multiselect-container dropdown-menu" style="max-height: 300px; overflow-y: auto; overflow-x: hidden;">
                    <li class="multiselect-item multiselect-all">
                        <a href="javascript:void(0);" class="multiselect-all">
                            <label class="checkbox"><input type="checkbox" name="multiselect" value="multiselect-all"> Select all positions</label>
                        </a>
                    </li>
                    <li class="">
                        <a href="javascript:void(0);">
                            <label class="checkbox"><input type="checkbox" name="multiselect" value="1"> Full width - Top of page</label>
                        </a>
                    </li>
                    <li class="">
                        <a href="javascript:void(0);">
                            <label class="checkbox"><input type="checkbox" name="multiselect" value="2"> Full width - Below navigation</label>
                        </a>
                    </li>
                </ul>
            </div>
            <span class="help-block form-error">Position required</span>
        </td>
    </tr>
</tbody>

Answer 1

This may not be a ideal solution for this issue, but I hope it will resolve your issue.
You need to write small code under "onDropdownShow" and "onDropdownHide" events of bootstrap multiselect dropdown.

Change the javascript configuration as below.

jQuery('#availablePositions').multiselect({
    nonSelectedText: 'Select positions',
    includeSelectAllOption: true,
    includeSelectAllIfMoreThan: 5,
    selectAllText: 'Select all positions',
    maxHeight: 300,
    buttonWidth: '100%',
    onDropdownShow: function(event) {
        var positions = jQuery('#availablePositions').val();
        Validate(jQuery('#availablePositions'), positions);
    },
    onDropdownHide: function(event) {
        var positions = jQuery('#availablePositions').val();
        Validate(jQuery('#availablePositions'), positions);
    }
});

The above code will call Validate method and pass the selected options whenever the dropdown window is shown or hidden. If the options parameter is not empty, Then search for the container with the class "has-error". If the container is with "has-error", then remove span with class 'help-block' and also remove the class 'has-error'.

var Validate = function(element, selectedOptions)
{
    if (!jQuery.isEmptyObject(selectedOptions))
    {
        var errorContainer = jQuery(element).parents('.has-error');
        jQuery('span.help-block', errorContainer).remove();
        errorContainer.removeClass('has-error');
    }
}