BootPrap

Question

ile CakePHP kullanırken sarıcı div hata sınıfı nasıl değiştirilir CakePHP 2.3.6 ile Bootstrap 3.0RC1 kullanıyorum. validation states için has-error ve has-warning gibi güzel görünümlü sınıflardan yararlanmaya çalışırken, FormHelper varsayılan öğe sınıfını sarma divine eklemem gerekiyor.

Şimdiye kadar bu kodu kullanıyorum:

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')); 

hangisi olacak hata çıktı bu:

<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> 

Her şey error sınıfını değiştirmek gerek dışında, sadece iyi olduğunu has-error için kaydırma div içinde label, input ve span için yeni stiller uygulanır. Şimdiye kadar temiz bir çözüm bulunamadı.

Uyguladığım çirkin çözüm, Bootstrap uygulamasındaki has-error stillerini, uygulamasındaki error sınıfına kopyalamak olduğunu düşündüm.

Answer 1

Eğer FormHelper iç gözlem verseniz de hata büyü yapmak find in this line "çirkin" kodu.

Özgün yazarlar bunu yapılandırma yoluyla yapma şansı olmadığından, bu tek satırı değiştirerek kendi BootstrapFormHelper yazmanızı ve giriş işlevini geçersiz kılmanızı öneririm. İşte

pasajı edilir:

//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; 
     } 
    } 
} 

Zaten özel BootstrapFormHelper, here is link to full gist kullanıyorum beri.

Sadece app\View\Helper dosyayı kopyalamak ve TÜM Denetleyicilerinizi için bu satırı ekleyin:

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

Eğer BootstrapFormHelper.php olarak özünü kaydettikten varsayarak.

Answer 2

Biraz daha az çirkin bir çözüm, seçicinizi bu belirli hata türü için bootstrap'in CSS dosyasına eklemektir. Bu şekilde tüm stil değerlerini kopyalamıyorsunuz, sadece hata divlerinizi mevcut stil tanımlarına ekliyorsunuz.

başka bir seçenek sayfa o zamana kadar garip bakacağız rağmen DOMREADY üzerine 'vardır-yanılma' ile 'hata' gelenler sınıfları değiştirmek için javascript kullanmak olacaktır. Gerçekten temiz bir çözüm değil.

Answer 3

Hiç CakePHP kullanmamıştım, ancak cevabı burada yayınlamaya cesaret ediyorum. Mesaj elemanının, diğer elemanlar gibi çoklu sınıflar taşıyabilmesi gerektiğini düşünüyorum.

Yani basit bir düzenleme geçerli:

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

Ben css kodu kopyalayıp yapıştırmak için bir neden göremiyorum.

Answer 4

Dereks'in ilk yanıtına, stillerinizi Bootstrap CSS dosyasına ekleyerek katılıyorum.

Hatları 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; 
    } 

Sen bu değiştirmelisiniz:

 

    .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

jQuery kullandı.

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

Answer 6

ÇÖZÜM Ben KULLANIMI:

Her şey sadece i gibi div "-hatası vardır" sınıfı CakePhp fonksiyonu isFieldError() ve basitçe ekleme kullanarak bu alan için herhangi bir hata olup olmadığını kontrol, yeni bir girdi oluşturmak aşağıda yaptı:

Sadece div ayarı:

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

Tam kod bir alan için:

<?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 altyapısı ne olursa olsun uyarlanmış bir özel Yardımcı kullanıyorum. Bu durumda Bootstrap.

<?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); 
    } 

} 

?> 

Sonra standart Form yardımcı

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