引导表单验证更改成功和错误颜色答案

【问题标题】：Bootstrap form validation changing success and error colors引导表单验证更改成功和错误颜色
【发布时间】：2017-01-04 16:59:32
【问题描述】：

这是我的表单，我希望表单在发生错误/某些事情时改变颜色。

例如，如果用户没有在必填字段中输入任何内容，
我希望它使用引导程序的 css 类更改颜色，谁能教我如何实现这一点？
p.s.我是新人，很抱歉有一个新手问题。

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name">Name</label>  
  <div class="col-md-5">
  <input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">

  </div>
</div>

<!-- Password input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="password">Password</label>
  <div class="col-md-5">
    <input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md" required="">

  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="button"></label>
  <div class="col-md-4">
    <input type = "submit" id="button" name="button" value = "Submit" class="btn btn-success">
  </div>
</div>

</fieldset>
</form>

【问题讨论】：

完全取决于您使用什么来进行验证。您是否使用浏览器本机验证？有 CSS 选择器。您是使用使用正则表达式编写的普通 JS 还是使用 3rd 方库进行验证，您可能会得到一个 css 类作为对其进行样式设置的钩子。有关这方面的更多信息会有所帮助。
@PraveenPuglia 我正在使用 codeigniter。

标签： html css forms twitter-bootstrap

【解决方案1】：

有一个用于此目的的 CSS 选择器 (:invalid)，但在单独的输入级别上。您可以通过检查无效的子项来为整个表单着色，如下所示：

/* add space to denote child element */
form :invalid {
    background: red;
}

【讨论】：

【解决方案2】：

对于 Bootstrap，只需将 has-error 类添加到组中。

<div class="form-group has-error">
  <label class="col-md-4 control-label" for="name">Name</label>  
  <div class="col-md-5">
  <input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
  </div>
</div>

有关更多信息，请查看文档：http://getbootstrap.com/css/#forms-help-text

还有现场演示：http://jsbin.com/daxocivoho/1/edit?html,output

【讨论】：