Thiết lập chế độ xem html thông báo lỗi theo cách này?

Question

Tôi đang sử dụng Twitter-Bootstrap và muốn tạo ra html đúng để hiển thị xem lỗi như thế nào nó có phải nó trên trang web chính, đó là:

Các html cho lĩnh vực trên là:

<div class="control-group error"> 
<label for="inputError" class="control-label">Input with error</label> 
    <div class="controls"> 
    <input type="text" id="inputError"> 
    </div> 
</div> 

Lưu ý: Tôi đã xóa Please correct the error, <span>, tôi chỉ muốn trường nhập và nhãn.

Và nếu tôi là sử dụng dấu của tôi lên trang như là một ví dụ, trường email, nó sẽ là:

<div class="control-group"> 
<label for="user_email" class="control-label">Email*</label> 
    <div class="controls"> 
    <input type="email" value="" name="user[email]" id="user_email" class="span3"> 
    </div> 
</div> 

gì làm tôi phải làm gì để làm cho nó hoạt động như trước đây?

Answer 1

Đừng phát minh lại bánh xe. Sử dụng simple_form. Phiên bản hiện tại của đá quý cho phép bạn thực hiện các thao tác sau:

rails generate simple_form:install --bootstrap 

Với điều đó, bạn có thể sử dụng trình trợ giúp simple_form. Họ sẽ tạo ra những điều phù hợp với bạn.

Answer 2

Đường ray tự động tạo div với lớp field_with_errors khi thông báo lỗi xuất hiện. Điều đó div kết thúc tốt đẹp các yếu tố có lỗi. Để tùy chỉnh nó, bạn có thể thêm dòng này vào application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe } 

Đây là mặc định, vì vậy để có được cấu trúc tương tự như Twitter Bootstrap, bạn có thể chơi với nó.

html_tag là trình giữ chỗ cho trường có lỗi, ví dụ: <input name="model[attribute]" size="30" type="text" value="">

Bạn có thể bọc nội dung này trong một div khác và cũng thêm khoảng thời gian cho biết "Vui lòng sửa lỗi".

Thông tin thêm:http://guides.rubyonrails.org/configuring.html - mục 3.9

Answer 3

Tôi vừa mới gặp phải vấn đề này, và đã khắc phục nó với một thay đổi đơn giản để các Bootstrap CSS.

mã trường thông thường của tôi là:

<div class="control-group"> 
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %> 
    <div class="controls"> 
     <%= f.text_field :fieldname, :class => 'input-large' %> 
    </div> 
</div> 

Kể từ khi tôi đang sử dụng f.label và f.text_field nhãn và đầu vào đều đóng gói với các div với lớp field_with_errors (như Nicholas đề cập đến), làm cho kết quả HTML:

<div class="control-group"> 
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div> 
    <div class="controls"> 
     <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div> 
    </div> 
</div> 

Để làm cho chúng trông giống như kiểu dáng của Bootstrap <div class="control-group error">, tôi thêm một số bộ chọn bổ sung vào bootstrap.css. Tôi tìm tất cả các tham chiếu đến .control-group.error ... và thêm các dòng trùng lặp với .control-group .field_with_errors ....Vì vậy, tôi kết thúc với loại điều:

.control-group.error > label, 
.control-group.error .help-block, 
.control-group.error .help-inline, 
.control-group .field_with_errors > label, 
.control-group .field_with_errors .help-block, 
.control-group .field_with_errors .help-inline { 
    color: #b94a48; 
} 

Nó có thể không phải là cách thanh lịch nhất để làm điều đó cho Rails, nhưng với tôi nó có vẻ dễ dàng hơn rất nhiều so với đá quý phụ thuộc nhiều hơn hoặc trọng việc xử lý lỗi. Có, bạn sẽ phải thực hiện các thay đổi tương tự mỗi khi bạn cập nhật Bootstrap, nhưng chúng là những thay đổi khá đơn giản và bạn có thể tạo một tệp vá để tự động thực hiện.