Cách sửa đổi lớp lỗi div bao bọc khi sử dụng CakePHP với Bootstrap

Question

Tôi đang sử dụng Bootstrap 3.0RC1 với CakePHP 2.3.6. Cố gắng tận dụng những lớp học đẹp như has-error và has-warning cho validation states, tôi cần phải thay đổi lớp phần tử mặc định FormHelper thêm vào div gói.

Cho đến nay tôi đang sử dụng mã này:

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

nào sẽ ra này về lỗi:

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

Mọi thứ đều tốt, ngoại trừ việc tôi cần phải thay đổi lớp error trong div gói thành has-error, do đó, kiểu mới được áp dụng cho label, input và span. Không thể tìm thấy một giải pháp sạch cho đến nay.

Giải pháp xấu xí mà tôi nghĩ là sao chép has-error kiểu từ Bootstrap vào lớp error trong ứng dụng của tôi.

Answer 1

Nếu bạn quan sát FormHelper, bạn sẽ find in this line mã "xấu xí" làm sai lỗi.

Vì tác giả gốc không để lại bất kỳ cơ hội nào để thực hiện điều này theo cấu hình, tôi đề nghị bạn viết riêng BootstrapFormHelper và ghi đè chức năng nhập bằng cách thay đổi dòng đơn đó.

Dưới đây là đoạn mã:

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

Kể từ khi tôi đã sử dụng tùy chỉnh BootstrapFormHelper, here is link to full gist.

Chỉ cần sao chép tập tin vào app\View\Helper, và thêm vào ALL điều khiển của bạn dòng này:

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

giả định rằng bạn đã lưu ý chính như BootstrapFormHelper.php.

Answer 2

Một giải pháp ít xấu xí hơn là thêm bộ chọn của bạn cho loại div lỗi cụ thể đó vào tệp CSS của bootstrap của bạn. Bằng cách đó bạn không sao chép tất cả các giá trị kiểu, bạn chỉ cần thêm div lỗi của bạn vào các định nghĩa kiểu hiện có.

Một tùy chọn khác sẽ là sử dụng javascript để thay đổi các lớp từ 'lỗi' thành 'có lỗi' khi DOMREADY, mặc dù trang của bạn sẽ trông lạ cho đến thời điểm đó. Không thực sự là một giải pháp sạch.

Answer 3

Tôi chưa bao giờ sử dụng CakePHP, nhưng tôi dám đăng câu trả lời ở đây. Tôi nghĩ rằng phần tử tin nhắn sẽ có thể mang nhiều lớp giống như bất kỳ phần tử nào khác.

Vì vậy, chỉnh sửa đơn giản là:

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

Tôi thấy không có lý do gì để sao chép và dán đoạn mã css.

Answer 4

Tôi đồng ý với Dereks câu trả lời đầu tiên, thêm phong cách của bạn vào tệp CSS Bootstrap.

dòng 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; 
    } 

Bạn nên thay đổi này để:

 

    .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

tôi đã sử dụng jQuery.

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

Answer 6

SOLUTION tôi SỬ DỤNG:

Mỗi lần bạn tạo một đầu vào mới, kiểm tra xem có bất kỳ lỗi cho lĩnh vực mà sử dụng CakePHP chức năng isFieldError() và chỉ cần thêm "đã lỗi" class để div giống như tôi đã làm dưới đây:

Chỉ div thiết lập:

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

Full mã cho một lĩnh vực:

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

Tôi sử dụng Trình trợ giúp tùy chỉnh phù hợp với bất kỳ khung CSS nào. Trong trường hợp này là 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); 
    } 

} 

?> 

Sau đó sử dụng này thay vì tiêu chuẩn Form helper

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