使用Bootstrap在表单中标记错误
Answers:
（已通过Bootstrap v4，v3和v3的示例进行了更新）
过去几个主要版本的Bootstrap的带有验证类的表单示例。
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>Bootstrap 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>Bootstrap v2
在jsfiddle上查看实时版本
的.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>
@JimStewart谢谢！很高兴知道。如果有机会，我会尽快更新
—
jonschlinkert 2013年
在Bootstrap V3中已更改，
—
Waqar Alamgir
Bootstrap 3使用不同的类，例如has-error。请参考getbootstrap.com/css
—
Nish
如bootstrap3文档中所述：Bootstrap包括表单控件上错误，警告和成功状态的验证样式。若要使用，请将.has-warning，.has-error或.has-success添加到父元素。该元素内的任何.control-label，.form-control和.help-block
—
Nejmeddine Jammeli 2015年
Bootstrap V3：
<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>
有了v3答案很好，但是它不包含错误消息。
—
戴夫
感谢@Dave，但您的建议被其他人拒绝了，我更新了答案。
—
Waqar Alamgir 2014年
您的演示链接未显示您发布的代码。
—
ayjay
感谢@ayjay指出这一点，不幸的是他们有单独的文档来添加帮助块。更新了答案。
—
Waqar Alamgir
@fsasvari使用这样的网格系统：<div class =“ form-group has-success”> <span class =“ col-sm-12”> <label class =“ control-label” for =“ inputSuccess1”>输入成功</ label> </ span> <span class =“ col-sm-6”> <input type =“ text” aria- describeby =“ helpBlock2” id =“ inputSuccess1” class =“ form-control”> </ span> <span class =“ col-sm-6”> <span id =“ helpBlock2” class =“ help-block”>一段帮助文本，可以换行。</ span> </ span> < / div>
—
Waqar Alamgir'1
Bootstrap 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>看起来是这样的：
一旦完成，我想我也应该在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>输出：
通常最好在发生错误的地方附近显示错误。例如，如果某人输入电子邮件有误，请突出显示电子邮件输入框。
本文有几个很好的例子。 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
对于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>可以使用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>