Select2 gets green border, but keeps has-error class. Bug?

[jeroenk22]

Hi Kartik,

I'm using your DetailView widget inside a modal and i'm trying to send the form using ajax. Now there's a problem. When I clear a Select2 field (multiple) and try to submit the form there's a validation error. So far this is expected behaviour. But when I then select some values it should pass the validation, but unfortunately, it doesn't. The field gets a green border but still keeps the has-error class somehow. The class disappears when the field gets focus again. This only happens with the Select2 widget as far as I can see.

My controller:

    public function actionView($id) 
    {
        $planning = $this->findModel($id);
        $post = Yii::$app->request->post();

        if (Yii::$app->request->isAjax && $planning->load($post) && $planning->save()) {
                Yii::$app->session->setFlash('success', [
                    'type' => 'success',
                    'duration' => 10000,
                    'icon' => 'fa fa-check',
                    'message' => 'Opdracht is succesvol bijgewerkt.'.Html::button(Icon::show('hand-o-right', ['class' => ''], Icon::FA). Yii::t('app', 'View'), ['class' => 'btn btn-sm btn-success modalButton pull-right', 'data-notify' => 'dismiss', 'data-content' => Url::to(['planning/view', 'id' => $id])]),
                    'title' =>  Html::tag('span', 'Opdracht bijgewerkt', ['style' => 'font-weight: bold;']),
                    'positonY' => 'top',
                    'positonX' => 'right'
                ]);
        }
        else {
            return $this->renderAjax('view', ['planning' => $planning]); 
        }
    }

My JQuery:

$('body').on('beforeSubmit', 'form#view_form', function () {

    var form = $(this);
    // return false if form still have some validation errors
    if (form.find('.has-error').length) {
        return false;
    }

    // submit form
    $.ajax({
        url: form.attr('action'),
        data: form.serialize(),
        type: 'post',
    }).done(function(){
        $('.modal').modal('hide');
        $.pjax.reload({
            container: '#planner_grid', 
            timeout: 10000, 
            replace: false
        });
    }).fail(function(){
        console.log('Server error...');
    }); 

    return false;
});

Screenshot:

[jeroenk22]

As you can see the form-group div of the Select2 widget has a has-success class, but the span inside it keep ahas-error class..

[kartik-v]

This is more a Yii validation behavior that sets the has-success and has-error Bootstrap states and not a Select2 plugin issue.

Having said that, Yii client validation has a problem for such jquery plugins and this routine does not understand the Select2 markup like normal inputs.

I have provided an enhancement specific to Select2 widget that will fix it for most use cases.

However for advanced cases like AJAX based validations in Select2 - you need to write the JS code and trap this in the right event (e.g. on form submit button click ) and use the initS2Change JS method available with this Select2 widget extension and pass the $("#your-select2-id") as a parameter to the above method.