使用 Bootstrap 验证来验证表单字段答案

【问题标题】：Using Bootstrap validation to validate form fields使用 Bootstrap 验证来验证表单字段
【发布时间】：2015-07-21 19:04:04
【问题描述】：

我希望你们都可以推动我朝着正确的方向前进。我正在使用 html/css & bootstrap 创建一个表单。表单有点用，但我想使用引导程序提供的验证状态。我如何以正确的方式使用它？字段只有在正确填写时才会变为绿色，在发生错误时才会变为红色。

谁能给我一个关于如何显示正确状态的示例？（正确填写时为绿色，未填写时为红色）

<div class="container">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="row">
<div class="col-xs-3" style="padding-right:5px;">
  <label for="ex1"  ></label>
  <input class="form-control inputForm" id="ex1" name="voornaam" type="text" placeholder="Voornaam">
</div>
<div class="col-xs-3" style="padding-left:5px;">
  <label for="ex2"></label>
  <input class="form-control inputForm" id="ex2" type="text" name="achternaam" placeholder="Achternaam">   </div> </div><div class="row">


<div class="col-xs-6">
  <label for="ex3"></label>
  <input class="form-control inputForm" id="ex3" name="email" type="text" placeholder="Voer je e-mailadres in">

  </div></div>

<div class="row">


<div class="col-xs-6">
  <label for="ex3"></label>
  <input class="form-control inputForm" id="ex3"  name="wachtwoord" type="password" placeholder="Wachtwoord">
</div></div>

<div class="row">


<div class="col-xs-6">

  <input class="btn btn-primary btn-lg active" type="submit"  value="Registeren" style="Float: right; margin-top: 15px; width: 100%;">
</div></div>
</form>
</div>

【问题讨论】：

你需要使用一些javascript。

标签： php forms twitter-bootstrap validation form-control

【解决方案1】：

使用类 .has-warning、.has-error 或 .has-success。

错误状态：

<input class="form-control inputForm has-error" id="ex1" name="voornaam" type="text" placeholder="Voornaam">

正确状态：

<input class="form-control inputForm has-success" id="ex1" name="voornaam" type="text" placeholder="Voornaam">

http://getbootstrap.com/css/#forms-control-validation

【讨论】：