javascript - 样式化 jQuery 验证错误消息

Question

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

我想使用 Bootstrap 设计错误消息的样式。我想使用 .has-error 类和 .has-success 类。这些必须在具有类 .form-group 的父级 div 上使用。更多详情 here .

我一直在研究 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 , 可能与 success 结合选项:

Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

例如，你可以这样做:

$("#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 对象，所以它必须被包裹在$(元素)。

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