我无法在bootstrap中获取has-error文本字段

Question

i've been trying to learn yii recently and so i started to work on an simple form with bootstrap. im using yii 1.1.x version not version 2 so i had to install bootstrap manually and write coding based on it. anyway coming back to the problem it seems that my has-success class is being called correctly by jquery but it does'nt seem so for the has-error... can someone help and im grateful for your help

<script>
$(document).ready(function() {

    $('#contact_name').on('input', function() {
        var input = $(this);
        var is_name = input.val();
        if (is_name) {
            $('#contact_name').removeClass("has-success").addClass('has-error');
        } else {
            $('#contact_name').removeClass("has-error").addClass('has-success');
        }
    });

});
</script>
<h1>Example Form Validation</h1>
<br>
<div class="form " id="cla">
    <?php $form=$this->beginWidget('CActiveForm',array( 'id' =>'form','htmlOptions'=> array('class'=> 'form-horizontal', 'name' => 'forvalidate', 'id' => 'registration-form' ))); ?>
    <?php echo $form->errorSummary($model); ?>
    <div class="row">
        <div class="form-group col-lg-5" id='contact_name'>
            <?php echo $form->label($model,'name',$htmloptions = array('class'=>'control-label ',)); ?>
            <div class="controls">
                <?php echo $form->textField($model,'name',array('name' =>'name' ,'class'=>'form-control col-xs-5', 'aria-describedby'=>'inputSuccess4Status')); ?>
            </div>
        </div>
    </div>
    <?php $this->endWidget(); ?>
</div>
<!-- form -->

</div>

Answer 1

You have to add these classes. See the highlighted code below:

$(document).ready(function() {

    $('#contact_name').on('input', function() {
        var is_name = $(this).val();
        if (is_name) {
            $('#contact_name').removeClass("has-success").addClass('has-error');
            //                                           ^^^^^^^^^^^^^^^^^^^^^^^
        } else {
            $('#contact_name').removeClass("has-error").addClass('has-success');
            //                                         ^^^^^^^^^^^^^^^^^^^^^^^^
        }
    });

});