Jak zmodyfikować klasę błędów opakowania div przy użyciu CakePHP z Bootstrapem

Question

Używam Bootstrap 3.0RC1 z CakePHP 2.3.6. Próbując skorzystać z tych pięknie wyglądających klas, takich jak has-error i has-warning dla validation states, potrzebuję zmienić domyślną klasę elementów FormHelper, która dodaje do elementu div opakowania.

tej pory używam tego kodu:

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

który to na wyjście błędu:

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

wszystko jest w porządku, poza tym, że muszę zmienić klasę error w opakowaniu div do has-error, więc nowe style są stosowane do label, input i span. Nie udało się znaleźć dotychczas czystego rozwiązania.

Brzydkie rozwiązanie, które moim zdaniem polega na skopiowaniu stylów has-error z Bootstrap do klasy error w mojej aplikacji.

Answer 1

Jeśli introspekcji FormHelper, będziesz find in this line „brzydki” kod błędu to zrobić magii.

Ponieważ oryginalni autorzy nie zostawili żadnej szansy, aby to zrobić przez konfigurację, sugeruję napisanie własnego BootstrapFormHelper i nadpisanie funkcji wprowadzania, przez zmianę tej pojedynczej linii.

Oto urywek:

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

Skoro jestem już przy użyciu niestandardowych BootstrapFormHelper, here is link to full gist.

Wystarczy skopiować plik do app\View\Helper i dodać do WSZYSTKIE kontrolerów tej linii:

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

Zakładając, że masz już zapisany jako BootstrapFormHelper.php sens.

Answer 2

Nieco mniej brzydkim rozwiązaniem jest dodanie selektora dla tego konkretnego typu błędu div do pliku CSS bootstrap. W ten sposób nie kopiujesz wszystkich wartości stylu, po prostu dodajesz swoje divy błędów do istniejących definicji stylu.

Inną opcją byłoby użycie javascript do zmiany klas z "error" na "has-error" w DOMREADY, ale twoja strona będzie wyglądać dziwnie do tego czasu. Naprawdę nie jest to czyste rozwiązanie.

Answer 3

Nigdy nie używałem CakePHP, ale ośmielam się opublikować odpowiedź tutaj. Myślę, że element komunikatu powinien być w stanie przenosić wiele klas, tak jak każdy inny element.

Więc proste edycji jest:

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

widzę żadnego powodu, aby skopiować i wkleić kod CSS.

Answer 4

Zgadzam się z pierwszą odpowiedzią Dereks, dodając swoje style do pliku Bootstrap CSS.

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

Należy zmienić na:

 

    .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

użyłem jQuery.

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

Answer 6

ROZWIĄZANIE używać:

każdym utworzeniu nowego wkładu, należy sprawdzić, czy są jakieś błędy w tej dziedzinie z wykorzystaniem CakePHP funkcji isFieldError() i po prostu dołączyć „HAS-błąd” klasę dział tak jak ja zrobiłem poniżej:

Wystarczy div ustawienie:

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

Pełny kod dla jednego pola:

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

Używam niestandardowego pomocnika, który jest dostosowany do dowolnej struktury CSS. W tym przypadku 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); 
    } 

} 

?> 

Następnie użyć tego zamiast standardowego Form pomocnika

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