ブートストラップでCakePHPを使用する場合のラッパーdivエラークラスの変更方法

Question

Bootstrap 3.0RC1とCakePHP 2.3.6を使用しています。 validation statesのhas-errorとhas-warningのような美しいクラスを利用しようとすると、デフォルトの要素クラスを変更する必要があります。FormHelperは、ラップdivに追加されます。

これまでのところ、私はこのコードを使用しています：

echo $this->Form->create('User', array(
    'inputDefaults' => array(
     'class' => 'form-control', 
     'div' => array('class' => 'form-group'), 
     'label' => array('class' => 'control-label'), 
     'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block')) 
    ) 
)); 

echo $this->Form->input('email')); 

エラーに出力、これをしますどの：

<div class="form-group error"> 
    <label for="UserEmail" class="control-label">Email</label> 
    <input name="data[User][email]" class="form-control form-error" type="email" value="a@a.com"> 
    <span class="help-block">Email already in use.</span> 
</div> 

すべては私がerrorクラスを変更する必要があることを除いて、だけで結構です新しいスタイルがlabel,inputおよびspanに適用されるように、ラップするdivの範囲はhas-errorです。今のところクリーンな解決策を見つけることができませんでした。

私が考えた醜い解決策は、has-errorのスタイルをブートストラップから私のアプリのerrorクラスにコピーすることです。

Answer 1

あなたはFormHelperをイントロスペクトした場合、あなたよエラーの魔法を行うfind in this line「醜い」のコード。

元の作者は設定でこれを行う機会を残さなかったので、私はあなた自身のBootstrapFormHelperを書いて、その1行を変更して入力機能を無効にすることをお勧めします。私はすでにカスタムBootstrapFormHelper、here is link to full gistを使用していますので

//inside public function input($fieldName, $options = array()) 

$out['error'] = null; 
if ($type !== 'hidden' && $error !== false) { 
    $errMsg = $this->error($fieldName, $error); 
    if ($errMsg) { 
     $divOptions = $this->addClass($divOptions, 'has-error'); //old string value was 'error' 
     if ($errorMessage) { 
      $out['error'] = $errMsg; 
     } 
    } 
} 

：ここ

はスニペットです。

ただapp\View\Helperにファイルをコピーして、ALLあなたのコントローラにに次の行を追加します

public $helpers = array(
    'Form' => array('className' => 'BootstrapForm') 
); 

あなたはBootstrapFormHelper.phpとして要旨を保存したと仮定します。

Answer 2

エラー・ディビジョンの特定のタイプのセレクタをブートストラップのCSSファイルに追加するのは、やや醜い解決策です。そうすることで、すべてのスタイル値をコピーするのではなく、既存のスタイル定義にエラーdivを追加するだけです。

もう一つの選択肢は、DOMREADYでこれらのクラスを「エラー」から「エラーあり」に変更するためにjavascriptを使用することです。ただし、あなたのページはその時まで奇妙に見えます。本当にクリーンなソリューションではありません。

Answer 3

私はCakePHPを一度も使ったことはありませんが、私はここで答えを投稿したいと思います。メッセージ要素は他の要素のように複数のクラスを持つことができるはずです。

だから、簡単な編集は次のとおりです。

'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block has-error')) 

私はCSSのコードをコピー＆ペーストする理由を見ません。

Answer 4

私はDereksの最初の答えに同意し、あなたのスタイルをBootstrap CSSファイルに追加します。

行1590から1611

 

    .has-error .help-block, 
    .has-error .control-label { 
     color: #b94a48; 
    } 

    .has-error .form-control { 
     border-color: #b94a48; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    } 

    .has-error .form-control:focus { 
     border-color: #953b39; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; 
    } 

    .has-error .input-group-addon { 
     color: #b94a48; 
     background-color: #f2dede; 
     border-color: #b94a48; 
    } 

あなたはこれを変更する必要があります。私はjQueryのを使用

 

    .error .help-bloc, .has-error .help-block, 
    .error .control-label, .has-error .control-label { 
     color: #b94a48; 
    } 

    .error .form-control, .has-error .form-control { 
     border-color: #b94a48; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    } 

    .error .form-control:focus, .has-error .form-control:focus { 
     border-color: #953b39; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; 
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; 
    } 

    .error .input-group-addon, .has-error .input-group-addon { 
     color: #b94a48; 
     background-color: #f2dede; 
     border-color: #b94a48; 
    } 

Answer 5

。

<script> 
$(document).ready(function() { 
    $('.form-control').parent('.error').each(function() { 
     $(this).addClass('has-error'); 
    }); 
}); 
</script> 

Answer 6

SOLUTION私が使用します。

毎回、あなたはちょうど私のようにDIVする「エラーしている」クラスをCakePHPの機能isFieldError（）と単純に追加を使用して、そのフィールドのエラーがないかどうかを確認し、新しい入力を作成します以下でした：

をするだけdivの設定：

'div' => array('class' => "form-group ".($this->Form->isFieldError('username') ? 'has-error' : '')), 

1つのフィールド分の全コード：

<?php echo $this->Form->input(
    'username', 
    array(
     'label' => array('text' => 'Username', 'class' => 'strong'), 'placeholder' => "Your Username", 'class' => 'form-control', 
     'div' => array('class' => "form-group ".($this->Form->isFieldError('username') ? 'has-error' : '')), 
     'error' => array('attributes' => array('wrap' => 'p', 'class' => 'help-block has-error')) 
     ) 
); ?> 

Answer 7

私は、CSSフレームワークに関係なくカスタマイズされたカスタムヘルパーを使用します。この場合、ブートストラップ。

<?php 

App::uses('AppHelper', 'View/Helper'); 

class UIHelper extends AppHelper 
{ 
    public $helpers = array('Html', 'Form'); 

    public function textBox($fieldName, $options = array()) { 
     $options += array('class' => 'form-control', 'div'=>false, 'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-block'))); 

     if (isset($options['label'])) { 
      if (is_array($options['label'])) { 
       $options['label'] += array('class' => 'control-label'); 
      } else { 
       $options['label'] = array('text' => $options['label'], 'class' => 'control-label'); 
      } 
     } else { 
      $options['label'] = array('class' => 'control-label'); 
     } 

     $divOptions = array('class' => "form-group has-feedback"); 
     if (isset($options['div'])) { 
      if (is_array($options['div'])) { 
       $divOptions += $options['div']; 
      } 
     } 
     $options['div'] = false;     

     $divText = $this->Form->input($fieldName, $options); 

     if ($this->Form->isFieldError($fieldName)) { 
      $divOptions['class'] = "form-group has-error has-feedback"; 
      $divText .= $this->Html->tag('span', null, array('class' => "glyphicon glyphicon-remove form-control-feedback")); 
     } 

     return $this->Html->tag('div', $divText, $divOptions); 
    } 

} 

?> 

は、その後、標準Formヘルパー

echo $this->UI->textBox('email'));