jQuery.validate 和隐藏输入
jQuery.validate and hidden input
我有一个带有伪选择元素的表单。伪选择元素是一个下拉菜单。单击其中一个下拉项时,将为隐藏的输入指定一个分配给该项的值。我正在使用jQuery.validing来验证表单。一个简单的验证规则绑定到隐藏的输入。如果输入没有值,则隐藏输入和伪选择将被赋予一个错误类,并显示错误消息。
我的问题是更改隐藏输入的值不会触发更改、键控或模糊事件。如果错误状态应用于隐藏输入,则在输入给定有效值后,该状态将保持不变。只有当再次提交表单时,输入才会正确验证。
由于 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 验证插件,这些是将触发特定元素验证的标准事件(最后一个有点不同(......
- 在框中键入内容
- 从列表中选择
- 单击复选框或单选按钮
- 失去输入元素的焦点
- 单击"提交"按钮(验证整个表单(
由于当隐藏元素更改值时不会触发这些内容,因此您需要使用 .valid()
方法来验证元素,从而自行触发它。
你没有向我们展示任何代码,更不用说更改隐藏元素值的代码了,所以我只能给你一些通用的东西。 您可以将.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 }); });
您可能需要使用其他插件选项(如errorPlacement
选项(将错误消息label
正确放置在布局中,否则它将浮动在隐藏元素之后的某个位置。
相关文章:
- 隐藏和显示输入无效
- 如何在jquery ajax成功html响应中找到输入隐藏元素
- 根据文本字段中的用户输入隐藏/显示复选框
- 根据用户输入隐藏/显示 HTML 页面的某些部分
- 如何通过 JavaScript 设置输入隐藏字段的值
- Jquery为链接获取不同的输入隐藏值
- 输入隐藏don't运行onChange事件
- 如何使用JQueryFancybox2将嵌套输入隐藏子项的值获取到自定义内容中
- 如何使用javascript从输入隐藏类型设置输入类型文件中的值
- 如何仅存储特定的元素文本到输入隐藏值
- Jquery输入隐藏值未获取
- 如何从<输入隐藏>在后台代码
- 在提交表单之前将输入隐藏值替换为通过Ajax获取的值
- 在JavaScript中创建输入隐藏类型元素数组,并在Servlet中获取值,但java.lang.NullPointe
- 如何添加多值的输入隐藏
- 将Javascript输入隐藏字段的值设置为另一个输入文本字段中输入的值
- 使用 JQuery 获取输入隐藏值
- 当数量输入隐藏在复合产品中时,禁用woocommerce产品页面上的-/+按钮
- 使用jQuery data() vs原生javascript getAttribute vs输入隐藏
- HTML和Javascript -如何模拟禁用输入(隐藏插入符号)