我有一个带有伪选择元素的表单。伪选择元素是一个下拉菜单。单击其中一个下拉项目时,隐藏的输入将被赋予分配给该项目的值。我正在使用 jQuery.validate 来验证表单。一个简单的验证规则绑定(bind)到隐藏的输入。如果输入没有值,则隐藏输入和伪选择被赋予错误类并显示错误消息。
我的问题是更改隐藏输入的值不会触发更改、键盘输入或模糊事件。如果错误状态应用于隐藏输入,则在输入被赋予有效值后该状态仍然存在。只有再次提交表单时,输入才会正确验证。
由于 jQuery.validate 启用了对隐藏输入的验证,我想知道是否有处理此问题的配置或方法。
编辑:
$form.validate({
ignore: false,
rules: {
'firstname': 'required',
'lastname': 'required',
'org': 'required',
'role': 'required',
'email': {
required: true,
email: true
}
},
messages: {
'firstname': 'Please enter your first name',
'lastname': 'Please enter your last name',
'org': 'Please enter your organization',
'role': 'Please select your role',
'email': 'Please enter your email'
},
errorPlacement: function(error, element) {
var $errMessage = $('.js-err-message');
$errMessage.removeClass('js-hidden');
$(error).each(function(){
$errMessage.append(error);
if (element.is('#role-input')) {
$('.pseudo-select').addClass('mad-error');
}
});
}
});
最佳答案
使用 jQuery 验证插件,这些是将触发特定元素验证的标准事件(最后一个有点不同)...
- 在框中输入
- 从列表中选择
- 点击复选框或单选按钮
- 输入元素失去焦点
- 单击提交按钮(已验证整个表单)
由于隐藏元素更改值时不会触发这些操作,因此您需要使用 the .valid()
method 自行触发它验证元素。
您没有向我们展示任何代码,更不用说更改隐藏元素值的代码了,所以我只能给您一些通用的东西。您可以将 .valid()
代码放在您用来更改值的任何函数中...
- 改变隐藏元素的值
调用
.valid()
验证隐藏元素$(document).ready(function() { $('#myform').validate({ // initialize plugin // your options }); $('#some_button').on('click', function() { // some imaginary button that changes the hidden value $('input[name="myHiddenElement"]').val('newvalue'); // <- change the hidden value $('input[name="myHiddenElement"]').valid(); // <- triggers validation on the hidden element }); });
您可能需要使用其他插件选项,例如 the errorPlacement
option在您的布局中正确放置错误消息 label
,否则它将漂浮在隐藏元素之后的某个位置。
关于javascript - jQuery.validate 和隐藏输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27231738/