1. Christoffer Niska
  2. yii-bootstrap
Issue #162 new

Form input's highlight

Ruslan Fadeev
created an issue

If i use widget TbActiveForm(vertical type) with enable client validation, divs "control-group" no get class "error" or "success" by client validation (get after submit form only)...

Only Horizontal type form highlight works right

Comments (3)

  1. cfletcher1856

    I am having the same problem, the vertical forms dont get wrapped in div.control-group and that is the element that bootstrap uses to apply the validation classes.

    Horizontal

    <form class="form-horizontal" id="login-form" action="/login" method="post" _lpchecked="1">
        <p class="note">Fields with <span class="required">*</span> are required.</p>
    
        <div class="alert alert-block alert-error" id="login-form_es_" style="">
            <p>Please fix the following input errors:</p>
            <ul>
                <li>Username cannot be blank.</li>
                <li>Password cannot be blank.</li>
            </ul>
        </div>
        <div class="control-group error">
            <label class="control-label required" for="LoginForm_username">
                Username <span class="required">*</span>
            </label>
            <div class="controls">
                <input name="LoginForm[username]" id="LoginForm_username" type="text">
                <span class="help-inline error" id="LoginForm_username_em_" style="">Username cannot be blank.</span>
            </div>
        </div>
        <div class="control-group error">
            <label class="control-label required" for="LoginForm_password">
                Password <span class="required">*</span>
            </label>
            <div class="controls">
                <input name="LoginForm[password]" id="LoginForm_password" type="password">
                <span class="help-inline error" id="LoginForm_password_em_" style="">Password cannot be blank.</span>
            </div>
        </div>
    
        <div class="form-actions">
            <button class="btn btn-primary" type="submit" name="yt0">Login</button> 
        </div>
    </form>
    

    Horizontal

    Vertical

    <form class="form-vertical" id="login-form" action="/login" method="post">
        <p class="note">Fields with <span class="required">*</span> are required.</p>
    
        <div class="alert alert-block alert-error" id="login-form_es_" style="">
            <p>Please fix the following input errors:</p>
            <ul>
                <li>Username cannot be blank.</li>
                <li>Password cannot be blank.</li>
            </ul>
        </div>
        <label for="LoginForm_username" class="required">
            Username <span class="required">*</span>
        </label>
        <input name="LoginForm[username]" id="LoginForm_username" type="text">
        <span class="help-block error" id="LoginForm_username_em_" style="">Username cannot be blank.</span>
    
        <label for="LoginForm_password" class="required">
            Password <span class="required">*</span>
        </label>
        <input name="LoginForm[password]" id="LoginForm_password" type="password">
        <span class="help-block error" id="LoginForm_password_em_" style="">Password cannot be blank.</span>
    
        <div class="form-actions">
            <button class="btn btn-primary" type="submit" name="yt0">Login</button> 
        </div>
    </form>
    

    Vertical

  2. Евгений Бобров

    For temprorary solution i've added in TbInputVertical class "run" method from TbInputHorizontal class with minor css fix - TbDisableMargin class added to bootstrap.css and bootstrap.min.css

    class TbInputVertical extends TbInput{
    public function run() {
        echo CHtml::openTag('div', array('class' => 'control-group TbDisableMargin ' . $this->getContainerCssClass()));
        parent::run();
        echo '</div>';
      }
    }
    
    .TbDisableMargin{
        margin-bottom: 0 !important;
    }
    

    I suggest this code for solving this issue

  3. cfletcher1856

    I added the code as you stated as well as the getLabel() function so the label will highlight

        /**
         * Returns the label for this block.
         * @return string the label
         */
        protected function getLabel()
        {
            if (isset($this->labelOptions['class']))
                $this->labelOptions['class'] .= ' control-label';
            else
                $this->labelOptions['class'] = 'control-label';
    
            return parent::getLabel();
        }
    
  4. Log in to comment