javascript - Twitter-Bootstrap 表单验证样式

Question

这是我的 html 代码:

<div class="form-group has-feedback has-errors" id="password-group">
    <input type="password" value="" name="password" placeholder="New Password" class="form-control" id="password">
    <span class="glyphicon glyphicon-lock form-control-feedback has-error"></span>
    <p class="help-block" id="password-error">The password must be at least 6 characters.</p><p class="help-block" id="password-error">The password confirmation does not match.</p>
</div>

还有我表格的屏幕截图:

通常表单应该有错误样式(红色)。所以我在这里错过了什么？

注意我正在使用 Jquery 添加错误标签，我正在通过 JSON 使用服务器验证:

$form.find('.form-group').removeClass('has-errors');
$form.find('.form-group').addClass('has-errors');
var field = errors[key];
for ( var i = 0; i < field.length; i++) {
  var $group = $form.find('#' + key + '-group');
  //add the error class and set the error text
  $group.remove('#' + key + '-error');
  $group.append('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');
}

Answer 1

你的代码说 has-errors，但是 Bootstrap 类只是 has-error

我还认为我应该指出，看起来您的 javascript 正在生成两个具有 id="password-error" 的不同元素。具有相同 id 属性的多个元素不是有效的 HTML。