javascript - Bootstrap 3 验证状态，默认显示 'Error'

Question

我有一个简单的 bootstrap 3 样式的表单。我有一个带有 help-block 的 span ，据我所知，如果父 div 具有类 form-group ，则会显示它> 还定义了 has-error，但是默认情况下会显示错误帮助文本。

我找到了这个SO thread但是，我认为 Bootstrap 会处理这种隐藏/取消隐藏逻辑。这是一个错误的假设吗？我应该负责显示隐藏吗？

<form id="the-form" action="/abc" method="post">                                  

 <div class="form-group">
  <label for="title" class="control-label">Title</label>
  <input id="title" name="title" class="form-control" placeholder="Title" type="text" value="">    
  <span class="help-block">Title is not valid.</span>                   
 </div>

 <button id="create-button" type="button" class="btn btn-primary">Submit</button>
</form>

但是，默认情况下会显示错误文本:

Answer 1

当您将类 has-error 添加到 form-group div 时。Bootstrap 仅将 CSS 错误应用于 from-group 内部的元素。

如果您只想在出现错误时显示错误消息。你必须通过 JavaScript 显示或隐藏它.. 有几种方法可以做到这一点.. 一种是:默认情况下隐藏 err msg，你可以使用隐藏的 bootstrap class 来做到这一点

<span class="help-block hidden">Title is not valid.</span>

因此，当您将 has-error 类添加到表单时，您应该从帮助 block 中删除隐藏的类。然后，当表单正确时，您需要再次添加隐藏的类。所有这些都使用 JS 。这会起作用的。