Question

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

例如，如果用户没有在必填字段中输入任何内容，我希望它使用bootstrap的css类来改变颜色，有人可以教我如何实现这一点吗？
附：我是新人，很抱歉新手问题。

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

Answer 1

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

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

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

有关详细信息，请查看文档：{{3}}

现场演示：http://getbootstrap.com/css/#forms-help-text

Bootstrap表单验证更改成功和错误颜色

2 个答案: