样式化jQuery验证错误消息

我已经使用Jade创建了一个表单页面，并且正在使用jQuery验证插件进行验证。样式化jQuery验证错误消息

我想使用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',

来源

2014-12-02 JNevens

时遇到了问题，根据他们的阶级或增加一个元素类上时，有一个错误的造型元素？ – Gezzasa 2014-12-02 08:26:59

将该类添加到某个元素 – JNevens 2014-12-02 08:35:49

关于这个问题的一个想法 - 您可以通过摆脱翡翠并仅显示生成的HTML来改进它。除非翡翠是问题的一部分，否则它并没有真正添加任何问题。 – Ryley 2014-12-02 21:48:01

你要找的选项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对象，所以它必须包装在$(element)中。

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

来源

2014-12-02 16:12:52 Ryley

当我只使用'errorPlacement'选项时，表单工作正常（除了'has-error'类永远不会消失）。但是当我添加'success'选项时，表单是从1值正确的那一刻开始提交的（其他错误或空的） – JNevens 2014-12-03 14:05:57

是的，我建议''success'选项导致它抛出错误，我相信！查看我的编辑... – Ryley 2014-12-03 16:43:09

Ryley，'highlight'和'unhighlight'是切换这些类的最佳回调函数，**不是**'errorPlacement'和'success'。 'highlight/unhighlight'函数甚至已经有了'errorClass'和'validClass'参数。 – Sparky 2014-12-03 16:56:58

样式化jQuery验证错误消息

回答

相关问题