Twitter Bootstrap 表单验证 - 使用 jQuery 验证插件使用验证状态

Question

我有一个使用 Twitter Bootstrap 框架设计的简单登录表单，如下所示：

<form class="form-signin" role="form" action="index.php" method="post" id="login">
 <h2 class="form-signin-heading">Please Log in</h2>
 <input type="text" name="username" class="form-control" placeholder="Account Name" required autofocus>
 <input type="password" name="password" class="form-control" placeholder="Password" required>
 <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
 </form>

我正在使用 jQuery Validation 插件来验证在提交表单之前是否输入了用户名/密码字段 - 这很好用。

<script>
    $(document).ready(function () {
   // initialize the plugin
   $("#login").validate();
   });
</script>

我想利用 Bootstrap 验证状态，将错误文本（“此字段为必填项”）显示为红色，并使关联的表单字段具有红色边框。我不确定如何添加

.has-error

样式到适当的元素？

Answer 1

试试：

$("#login").validate({
    errorClass: "has-error"
});