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。