使用Bootstrap在表单中标记错误

我已经开始使用Bootstrap来实现一个不错的页面devise,而不使用GWT(后端是用java编写的)

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

我不知道这个想法是用红色在input元素内显示错误信息还是在input元素下面显示,或者用popup窗口显示?

(通过Bootstrap v4,v3和v3的示例进行更新)

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

Bootstrap v4

查看codepen上的实时版本

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

查看codepen上的实时版本

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

查看jsfiddle上的实时版本

bootstrap v2表单验证

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