Đánh dấu lỗi trong biểu mẫu bằng Bootstrap

Tôi đã bắt đầu sử dụng Bootstrap để đạt được một thiết kế trang đẹp mà không cần dùng đến GWT (phần phụ trợ được tạo bằng java)

Đối với màn hình đăng nhập của tôi, tôi đã sao chép ví dụ này . Bây giờ tôi muốn đánh dấu một lỗi, ví dụ, tên người dùng bị bỏ trống. Vì vậy, tôi đã tự hỏi các thủ tục trong khung Bootstrap cho việc này là gì. Hoặc có thể nếu có ví dụ hiển thị biểu mẫu có lỗi.

Tôi không chắc liệu ý tưởng là hiển thị thông báo lỗi bên trong phần tử đầu vào có màu đỏ hay hiển thị bên dưới phần tử đầu vào hoặc có thể có cửa sổ bật lên?

(CẬP NHẬT với các ví dụ cho Bootstrap v4, v3 và v3)

Ví dụ về các biểu mẫu với các lớp xác nhận cho một vài phiên bản chính của Bootstrap trước đây.

Bootstrap v4

Xem phiên bản trực tiếp trên codepen

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

Bootstrap v3

Xem phiên bản trực tiếp trên codepen

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </div>
  <div class="form-group has-error">
    <label class="control-label" for="inputError">Input with error</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Please correct the error</span>
  </div>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </div>
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

Bootstrap v2

Xem phiên bản trực tiếp trên jsfiddle

Các .error, .success, .warningvà .infocác lớp học sẽ được nối vào .control-group. Đây là đánh dấu Bootstrap tiêu chuẩn và kiểu dáng trong v2. Chỉ cần làm theo và bạn đang trong tình trạng tốt. Tất nhiên, bạn có thể đi xa hơn với các kiểu của riêng mình để thêm cửa sổ bật lên hoặc "flash nội tuyến" nếu bạn thích, nhưng nếu bạn tuân theo quy ước Bootstrap và treo các lớp xác thực đó lên thì .control-groupnó sẽ luôn ổn định và dễ quản lý (ít nhất là vì bạn ' sẽ tiếp tục có lợi ích của các tài liệu và ví dụ về Bootstrap)

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>

Bootstrap V3 :

Liên kết tài liệu chính thức 1
Liên kết tài liệu chính thức 2

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess" />
  <span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
  <span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>

Người ta cũng có thể sử dụng lớp sau trong khi sử dụng lớp phương thức bootstrap (v 3.3.7) ... khối trợ giúp và khối trợ giúp không hoạt động theo phương thức.

<span class="error text-danger">Some Errors related to something</span>

Đầu ra trông giống như một cái gì đó bên dưới:

Bootstrap V3:

Khi tôi đang tìm kiếm các tính năng laravel thì tôi đã biết xác nhận mẫu tuyệt vời này. Sau đó, tôi đã sửa đổi các tính năng biểu tượng glyphicon. Bây giờ, nó trông thật tuyệt.

<div class="col-md-12">
<div class="form-group has-error has-feedback">
    <input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>       
    <span class="help-block"><p>The Email field is required.</p></span>                                        
</div>
</div>
<div class="clearfix"></div>

<div class="col-md-6">
<div class="form-group has-error has-feedback">
    <input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>                                            
    <span class="help-block"><p>The Name field is required.</p></span>                                        
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
 <input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>                                       
</div>
</div>

Đây là những gì nó trông giống như:

Khi tôi hoàn thành nó, tôi nghĩ rằng tôi cũng nên thực hiện nó trong Codeigniter. Vì vậy, đây là xác thực Codeigniter-3 với Bootstrap:

Bộ điều khiển

function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{  
 //validation pass. Your code here.
}
}

Lượt xem

<div class="col-md-12">
<?php 
 $email_error = (form_error('email') ? 'has-error has-feedback' : '');
 if(!empty($email_error)){
 $emailData = '<span class="help-block">'.form_error('email').'</span>';
 $emailClass = $email_error;
 $emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
    $emailClass = $emailIcon = $emailData = '';
 } 
 ?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>

Đầu ra:

Nói chung hiển thị lỗi gần nơi xảy ra lỗi là tốt nhất. tức là nếu ai đó có lỗi khi nhập email của họ, bạn hãy đánh dấu vào ô nhập email.

Bài viết này có một vài ví dụ tốt. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Ngoài ra twitter bootstrap có một số kiểu đẹp giúp làm điều đó (cuộn xuống phần Trạng thái xác thực) http://twitter.github.com/bootstrap/base-css.html#forms

Làm nổi bật mỗi hộp đầu vào phức tạp hơn một chút, vì vậy cách dễ dàng là chỉ cần đặt một cảnh báo bootstrap ở trên cùng với chi tiết về những gì người dùng đã làm sai. http://twitter.github.com/bootstrap/components.html#alerts

Đối với Bootstrap v4, sử dụng:
has-dangercho form-grouptrình bao bọc,
form-control-dangercho biểu tượng đầu vào để hiển thị (sẽ hiển thị ✖ ở cuối đầu vào),
form-control-feedbackđể trình bao bọc thông báo

Thí dụ:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


<div class="form-group has-danger">
  <input type="text" class="form-control form-control-danger">
  <div class="form-control-feedback">Not valid :(</div>
</div>

Có thể sử dụng CSS để hiển thị thông báo lỗi chỉ khi có lỗi.

.form-group.has-error .help-block {
    display: block;
}

.form-group .help-block {
    display: none;
}


<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>