Thực tiễn tốt nhất để đặt thông báo xác thực bằng cách sử dụng Twitter Bootstrap 3

Question

Tôi đang sử dụng MVC4 nhưng tôi cho rằng đây là sự cố đối với bất kỳ ai sử dụng phiên bản Bootstrap 3 mới. Vì điều khiển biểu mẫu hiện là chiều rộng: 100% theo mặc định, thực tiễn tốt nhất để đặt thông báo xác thực là gì?

Trong phiên bản 2.x, đặt thông báo xác thực trong phạm vi trợ giúp ngay sau khi điều khiển đầu vào hoạt động tốt nhất để đảm bảo rằng thư được đặt ở bên phải của điều khiển.

Nhưng trong phiên bản 3, chúng luôn bị đẩy xuống đáy khiến tất cả các điều khiển chuyển xuống vì thông báo xác thực bị bắt buộc dưới sự kiểm soát.

<div class="form-group has-error"> 
    <label for="Label" class="col-lg-2 control-label">Label</label> 
    <div class="col-lg-5"> 
     <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""> 
     <span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span> 
    </div> 
</div> 

tôi đã xem xét bằng tay thiết lập chúng trên một cột mới như thế này (dưới đây) nhưng tự hỏi nếu có một cách dễ chấp nhận hơn hay một cách ít tay đối phó với điều này.

<div class="form-group has-error"> 
    <label for="Label" class="col-lg-2 control-label">Label</label> 
    <div class="col-lg-5"> 
     <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""> 
    </div> 
    <div class="col-lg-5"> 
     <p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p> 
    </div> 
</div> 

Answer 1

Tôi sẽ không nói có "phương pháp hay nhất" để trình bày lỗi xác thực biểu mẫu. Đó là một sự lựa chọn thiết kế cá nhân.

Tùy thuộc vào bao nhiêu JS bạn muốn viết, bạn có thể nhận được một chút khéo léo và chèn một addon nhóm đầu vào mà giữ một thông báo lỗi trong một biểu tượng tooltip, như vậy ...

<div class="input-group"> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon"> 
    <i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i> 
    </span> 
</div> 

Thành thực mà nói mặc dù , Tôi nghĩ rằng các thông báo xuất hiện bên dưới các trường nhập liệu là tốt, miễn là chúng không làm phiền bố cục trang và đẩy nội dung xuống khi chúng xuất hiện. (Đó chỉ là vấn đề có một thùng chứa hiển thị khối và có chiều cao mã hóa cứng.)