使用Bootstrap在表单中标记错误
我已经开始使用Bootstrap来实现一个不错的页面devise，而不使用GWT（后端是用java编写的）
对于我的login屏幕，我复制了这个例子 。 现在我想标记一个错误，例如，用户名被留空。 所以我想知道在这个Bootstrap框架中的过程是什么。 或者，如果有例子显示错误的forms。
我不知道这个想法是用红色在input元素内显示错误信息还是在input元素下面显示，或者用popup窗口显示？
（通过Bootstrap v4，v3和v3的示例进行更新）
带有过去几个Bootstrap主要版本的validation类的表单示例。
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类被附加到.warning .control-group 。 这是v2中的标准Bootstrap标记和样式。 只要遵循这一点，你的状态良好。 当然，如果你愿意的话，你可以用自己的风格来添加一个popup窗口或者“内联flash”，但是如果你按照Bootstrap的惯例，把这些validation类挂在.control-group ，它将保持一致和易于pipe理至less你会继续得到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 ：
官方文件链接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>
还可以在使用引导模态类（v 3.3.7）时使用以下类…帮助联机和帮助块在模式中不起作用。
输出如下所示：Image http://i.stack.imgur.com/BQQeO.png
<span class="error text-danger">Some Errors related to something..</span>
通常在出现错误的地方显示错误是最好的。 即如果某人在input电子邮件时出现错误，则突出显示电子邮件input框。
这篇文章有几个很好的例子。 http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
另外twitter引导有一些很好的样式，可以帮助（向下滚动到validation状态部分） http://twitter.github.com/bootstrap/base-css.html#forms
突出显示每个input框有点复杂，所以最简单的方法就是将引导警报放在最上方，详细说明用户做错了什么。 http://twitter.github.com/bootstrap/components.html#alerts
Bootstrap V3：
有一次，我正在寻找laravel的function，然后我才知道这个惊人的表单validation。 后来，我修改了图标的图标function。 现在，它看起来不错。
<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-3validation：
调节器
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>
输出： 
对于Bootstrap v4使用：
对form-group包装has-danger ，
input显示图标的form-control-danger （在input结束时显示✖），
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>
;){kind=link}