twitter-bootstrap - 使用 Bootstrap 在表单中标记错误

Question

我已经开始使用 Bootstrap 来实现一个漂亮的页面设计，而不使用 GWT（后端是用 java 制作的）

对于我的登录屏幕，我复制了这个示例。现在我想标记一个错误，例如，用户名留空。所以我想知道 Bootstrap 框架中的程序是什么。或者，如果有示例显示错误的表单。

我不确定这个想法是用红色在输入元素内显示错误消息，还是在输入元素下方显示错误消息，或者可能是弹出窗口？

Answer 1

（更新了 Bootstrap v4、v3 和 v3 的示例）

过去几个主要版本的 Bootstrap 具有验证类的表单示例。

引导程序 v4

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

引导程序 v3

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

引导程序 v2

在 jsfiddle 上查看实时版本

、.error和.success类被附加.warning到. 这是 v2 中的标准 Bootstrap 标记和样式。只要遵循这一点，你的身体就会很好。当然，如果您愿意，您可以超越自己的样式来添加弹出窗口或“内联 flash”，但是如果您遵循 Bootstrap 约定并将这些验证类挂在上面，它将保持一致且易于管理（至少因为您将继续受益于 Bootstrap 文档和示例）.info.control-group.control-group

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

Answer 2

引导程序 V3：

官方文档链接 1
官方文档链接 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>

Answer 3

在使用引导模态类（v 3.3.7）时，也可以使用以下类... help-inline 和 help-block 在模态中不起作用。

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

输出如下所示：

Answer 4

引导程序 V3：

一旦我在搜索 laravel 功能，我就知道了这个惊人的表单验证。后来，我修改了字形图标功能。现在，它看起来很棒。

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

这是它的样子：

一旦我完成它，我想我也应该在 Codeigniter 中实现它。所以这里是使用 Bootstrap 的 Codeigniter-3 验证：

控制器

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

看法

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

输出：

Answer 5

一般在错误发生的地方附近显示错误是最好的。即，如果有人在输入他们的电子邮件时出错，则突出显示电子邮件输入框。

这篇文章有几个很好的例子。 http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

twitter bootstrap 也有一些不错的样式可以帮助解决这个问题（向下滚动到验证状态部分） http://twitter.github.com/bootstrap/base-css.html#forms

突出显示每个输入框有点复杂，所以简单的方法是在顶部放置一个引导警报，其中包含用户错误的详细信息。 http://twitter.github.com/bootstrap/components.html#alerts

Answer 6

对于 Bootstrap v4 使用：
has-danger用于form-group包装器，
form-control-danger用于输入以显示图标（将在输入末尾显示 ✖），
form-control-feedback用于消息包装器

例子：

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

Answer 7

可以使用 CSS 仅在错误时显示错误消息。

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