样式化jQuery验证错误消息

Question

我已经使用Jade创建了一个表单页面，并且正在使用jQuery Validation插件对其进行验证。

我想使用Bootstrap设置错误消息的样式。 我想使用.has-error类和.has-success类。 这些必须在类.form-group的父div使用。 更多细节在这里 。

我一直在使用errorClass，errorElement，errorContainer，...选项，但是我似乎找不到正确的组合。 我在这里想念什么？

这是我的表格：

form#signupForm.form-horizontal(method='post', action='')
     .form-group
        label.col-sm-2.control-label(for='firstName') 
            | First Name:
        .col-sm-10
            input#firstName.form-control(type='text', placeholder='John',name='firstName')

    .form-group
        label.col-sm-2.control-label(for='lastName')
            | Last Name:
        .col-sm-10
            input#lastName.form-control(type='text', placeholder='Doe', name='lastName')

    .form-group
        .col-sm-2.control-label
            button.btn.btn-default(type='submit')
                | Submit

我在验证代码中尝试过此操作：

errorElement: 'div',
errorClass: 'has-error',

Answer 1

您要查找的选项是errorPlacement ，可能与成功选项结合使用：

自定义创建的错误标签的位置。 第一个参数：创建的错误标签作为jQuery对象。 第二个参数：无效元素作为jQuery对象。

例如，您可以执行以下操作：

$("#signupForm").validate({
  errorPlacement: function(error, element) {
    element.closest("div.form-group").removeClass('has-success').addClass('has-error');
  },
  success: function(error, element) {
    $(element).closest("div.form-group").addClass('has-success').removeClass('has-error');
  }
});

编辑：我注意到1）成功函数的旧版本根本没有传递element ，而在较新的版本中，它是DOMElement，而不是jQuery对象，因此必须包装在$(element) 。

工作示例： http : //jsfiddle.net/ryleyb/7epd44de/