Question

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

我想使用Bootstrap设置我的错误消息。我想使用.has-error类和.has-success类。这些必须在类div的父.form-group上使用。更多详情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选项结合使用：

自定义已创建错误标签的展示位置。第一个参数：创建的错误标签为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对象，所以它必须包含在{{1 }}

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

样式化jQuery验证错误消息

1 个答案: