我已经使用 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',
最佳答案
您要查找的选项是 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 对象,所以它必须被包裹在$(元素)
。
关于javascript - 样式化 jQuery 验证错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27244572/