[英]Conditional jquery validation on nested inputs with custom validator
I have the following HTML: 我有以下HTML:
<div class='headerWithYesNo'>
<p>Text....</p>
<div class='choices'>
<input type="radio" name="choices" value="yes" />
<input type="radio" name="choices" value="no" />
</div>
<div class='headerWithYesNoChild hidden'>
<input type="checkbox" />
<input type="checkbox" />
</div>
</div>
I have a jquery validator requiring the user to select yes or no. 我有一个jQuery验证程序,要求用户选择是或否。 When the user selects yes the 'headerWithYesNoChild' div is displayed.
当用户选择是时,将显示“ headerWithYesNoChild” div。 If yes is selected I want to require a user to select one of the checkboxes.
如果选择“是”,则我希望要求用户选择其中一个复选框。 So I have added the following custom validator:
因此,我添加了以下自定义验证器:
jQuery.validator.addMethod("headerWithYesNo", function(value, element) {
//If the value === no return valid
if (value === 'no') return true;
var yesNoChild = $(element).closest('.headerWithYesNo').children('.headerWithYesNoChild');
var checkedInputs = yesNoChild.find('input:checked');
//If any inputs are checked, return valid
if (checkedInputs.length > 0) {
return this.optional(element);
}
return false;
});
I add the validator with the following JavaScript: 我使用以下JavaScript添加验证器:
$('.headerWithYesNo .choices input:radio').each(function () {
$(this).rules("add", {
headerWithYesNo: true,
messages: {
headerWithYesNo: "Make a selection from the options below or select 'No'"
}
})
});
The only options I add to my validate function is to change the error placement: 我添加到我的validate函数的唯一选项是更改错误位置:
$('form').validate({
errorPlacement: function(error, element) {
... error placement logic
}
});
This works great... with one issue. 这很好用...有一个问题。 As soon as yes is selected the validation is fired, before the user has a chance to make a selection.
一旦选择“是”,就会在用户有机会进行选择之前触发验证。 I want the validation to fire when the user selects 'no' (to clear out any failed validation) or on form submit.
我希望当用户选择“否”(清除所有失败的验证)或提交表单时触发验证。 How can I achieve this?
我该如何实现?
What I ended up doing was adding a depends
to my rule: 我最终要做的是添加一个
depends
我的规则:
$('.headerWithYesNo .choices input:radio').each(function () {
$(this).rules("add", {
headerWithYesNo: {
depends: function(element) {
var targetType = $(event.target).attr('type');
if (element.value === 'no' || targetType === 'submit') {
return true;
}
return false;
}
},
messages: {
headerWithYesNo: "Make a selection from the options below or select 'No'"
}
})
});
So if the value of the radio is 'no' required is set to true. 因此,如果无线电的值是“ no”,则将其设置为true。 Or if the target is a submit input.
或者,如果目标是提交输入。 However I think @Sparky made some good suggestions about onclick, I just couldn't figure out how to apply it to just one rule.
但是我认为@Sparky对onclick提出了一些很好的建议,我只是想不出如何将其应用于仅一条规则。 I'm open to more feedback on this.
我愿意就此提供更多反馈。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.