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

Question

提问by Luciano

I've started using Bootstrap in order to achieve a nice page design without resorting to GWT (the backend is made in java)

我已经开始使用 Bootstrap 来实现漂亮的页面设计，而无需求助于 GWT（后端是用 java 制作的）

For my login screen I copied this example. Now I want to mark an error, for instance, that the username was left empty. So I was wondering what is the procedure in the Bootstrap framework for this. Or maybe if there are examples showing the form with error.

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

I'm not sure if the idea is to show the error message inside the input element with a red color, or to show it below the input element, or maybe with a popup?

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

Answer 1

回答by jonschlinkert

(UPDATED with examples for Bootstrap v4, v3 and v3)

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

Examples of forms with validation classes for the past few major versions of Bootstrap.

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

Bootstrap v4

引导程序 v4

See the live versionon codepen

在 codepen 上查看实时版本

bootstrap v4 form validation

bootstrap v4 表单验证

<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

引导程序 v3

See the live versionon codepen

在 codepen 上查看实时版本

bootstrap v3 form validation

bootstrap v3 表单验证

<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

引导程序 v2

See the live versionon jsfiddle

在 jsfiddle 上查看实时版本

bootstrap v2 form validation

bootstrap v2 表单验证

The .error, .success, .warningand .infoclasses are appended to the .control-group. This is standard Bootstrap markup and styling in v2. Just follow that and you're in good shape. Of course you can go beyond with your own styles to add a popup or "inline flash" if you prefer, but if you follow Bootstrap convention and hang those validation classes on the .control-groupit will stay consistent and easy to manage (at least since you'll continue to have the benefit of Bootstrap docs and examples)

的.error，.success，.warning和.info类被附加到.control-group。这是 v2 中的标准 Bootstrap 标记和样式。只要遵循这一点，你就会处于良好状态。当然，如果您愿意，您可以超越自己的样式来添加弹出窗口或“内联 flash”，但是如果您遵循 Bootstrap 约定并将这些验证类挂在其上.control-group，它将保持一致且易于管理（至少自从您将继续受益于 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>

Answer 2

回答by Waqar Alamgir

Bootstrap V3:

引导程序 V3：

Official Doc Link 1
Official Doc Link 2

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

回答by Jay

One can also use the following class while using bootstrap modal class (v 3.3.7) ... help-inline and help-block did not work in modal.

还可以在使用引导模式类 (v 3.3.7) 时使用以下类...... help-inline 和 help-block 在模态中不起作用。

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

Output looks like something below:

输出如下所示：

Answer 4

回答by Avnish alok

Bootstrap V3:

引导程序 V3：

Once i was searching for laravel features then i got to know this amazing form validation. Later on, i amended glyphicon icon features. Now, it looks great.

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

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

This is what it looks like:

这是它的样子：

Once i completed it i thought i should implement it in Codeigniter as well. So here is the Codeigniter-3 validation with Bootstrap:

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

Controller

控制器

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

View

看法

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

Output:

输出：

Answer 5

回答by hajpoj

Generally showing the error near where the error occurs is best. i.e. if someone has an error with entering their email, you highlight the email input box.

通常最好在发生错误的地方附近显示错误。即，如果有人在输入电子邮件时出错，请突出显示电子邮件输入框。

This article has a couple good examples. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

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

Also twitter bootstrap has some nice styling that helps with that (scroll down to the Validation states section) http://twitter.github.com/bootstrap/base-css.html#forms

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

Highlighting each input box is a bit more complicated, so the easy way would be to just put an bootstrap alert at the top with details of what the user did wrong. http://twitter.github.com/bootstrap/components.html#alerts

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

Answer 6

回答by Sojtin

For Bootstrap v4 use:
has-dangerfor form-groupwrapper,
form-control-dangerfor input to show icon (will display ? at the end of input),
form-control-feedbackto message wrapper

对于 Bootstrap v4 使用：
has-danger用于form-group包装器，
form-control-danger用于显示图标的输入（将在输入结束时显示？），
form-control-feedback用于消息包装器

Example:

例子：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/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

回答by kravits88

Can use CSS to show error message only on error.

可以使用 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>

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

提问by Luciano

回答by jonschlinkert

回答by Waqar Alamgir

回答by Jay

回答by Avnish alok

回答by hajpoj

回答by Sojtin

回答by kravits88

相关推荐

最近更新

标签

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

提问by Luciano

回答by jonschlinkert

回答by Waqar Alamgir

回答by Jay

回答by Avnish alok

回答by hajpoj

回答by Sojtin

回答by kravits88

相关推荐

twitter-bootstrap 如何从 twitter bootstrap 中删除未使用的样式？

twitter-bootstrap Bootstrap table-striped 不变色

twitter-bootstrap 文本输入中的 Twitter Bootstrap 下拉菜单

twitter-bootstrap 由于定位导航栏，Bootstrap 模态被涂黑

相关推荐

最近更新

标签