Twitter bootstrap 使用引导标记表单中的错误

我已经开始使用Bootstrap，以便在不使用GWT的情况下实现良好的页面设计（后端是java制作的）

对于我的登录屏幕，我复制了这个。现在我想标记一个错误，例如，用户名为空。所以我想知道在引导框架中是如何实现这一点的。或者，如果有示例显示表单有错误

---

我不确定是用红色显示输入元素内部的错误消息，还是在输入元素下面显示错误消息，或者是用弹出窗口显示错误消息？

通常在错误发生的位置附近显示错误是最好的。i、 e.如果某人在输入电子邮件时出错，则突出显示电子邮件输入框

本文有几个很好的例子。

twitter bootstrap还有一些很好的样式，可以帮助实现这一点（向下滚动到Validation states部分）

突出显示每个输入框有点复杂，因此简单的方法是在顶部放置一个引导警报，详细说明用户做错了什么。

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

在过去几个主要版本的引导中，带有验证类的表单示例

引导v4

请参阅代码笔上的

电子邮件
密码
长度必须为8-20个字符。

引导v3

请参阅代码笔上的

带警告的输入
可能出了什么问题
输入错误
请更正错误
输入信息
用户名已被占用
成功地投入
呜呼！

引导v2

请参阅jsfiddle上的

.error

、

success

、

warning

和

info

类附加到

控制组

。这是v2中的标准引导标记和样式。照这个做就好了。当然，如果您愿意，您可以使用自己的样式添加弹出窗口或“内联闪存”，但如果您遵循引导约定并将这些验证类挂在

控制组上，它将保持一致且易于管理（至少因为您将继续受益于引导文档和示例）


带警告的输入
可能出了什么问题
输入错误
请更正错误
输入信息
用户名已被占用
成功地投入
呜呼！
引导V3：





成功地投入
呜呼！
带警告的输入
可能出了什么问题
输入错误
请更正错误
在使用引导模式类（V3.3.7）时，还可以使用以下类。。。联机帮助和帮助块在模式中不起作用

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

与某些内容相关的错误

输出如下所示：

对于引导v4，请使用：

有危险
对于
表单组
包装，

表单控制危险
用于输入显示图标（将显示✖ 在输入结束时），

表单控制反馈
到消息包装器

例如：



无效：(
只能在出现错误时使用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>

.form-group.has-error.help块{
显示：块；
}
.窗体组.帮助阻止{
显示：无；
}
输入错误
请更正错误
引导V3:

当我搜索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>

查看

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


签出jquery验证。这相当简单。请注意，使用，您必须将
控制组更改为
表单组
，将
表单控制
添加到
元素，
帮助内联
添加到
帮助块
，将
警告
添加到
有警告
@JimStewart谢谢！很高兴知道。我会更新e一旦我有机会在Bootstrap V3中更改它，Bootstrap 3就会使用不同的类，例如has error。请参阅Bootstrap 3文档中提到的：Bootstrap包括表单控件上错误、警告和成功状态的验证样式。若要使用，请将.has warning、.has error或.has success添加到父元素中。是否.control label、.form control和.help block在该元素中。很高兴有一个v3答案，但它不包含错误消息。谢谢@Dave，但是你的建议被其他人拒绝了，我更新了答案。你的演示链接没有显示你发布的代码。感谢@ayjay指出这一点，不幸的是他们有单独的文档添加帮助块。更新了答案。@fsasvari使用如下网格系统：成功输入一块打断到新行的帮助文本。
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>