表单有两个复选框(cbDeclined& cbIsOOfFac),两个文本字段和一个下拉列表(txtHeight,txtWeight,ddlDevice)。
如果选中任一复选框,则禁用其他控件,其他控件的规则不适用。以下是现行规则:
$('form').validate({
highlight: function (element, errorClass) {
$(element).addClass("invalidElem");
},
unhighlight: function (element, errorClass) {
$(element).removeClass("invalidElem");
},
errorPlacement: function (error, element) {
var parent = element.parent();
parent.append(error);
},
errorElement: "div",
errorClass: "errorMsg"
});
function HeightWeightCtrlsEnabled() { return !cbDeclined.is(':checked') && !cbIsOOfFac.is(':checked'); }
txtHeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 3, min: 1, digits: true });
txtWeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 4, min: 1, digits: true });
ddlDevice.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); } });
function UpdateTextBoxes() {
var disableCtrls = !HeightWeightCtrlsEnabled();
txtHeight.prop('disabled', disableCtrls);
txtWeight.prop('disabled', disableCtrls);
ddlDevice.prop('disabled', disableCtrls);
if (disableCtrls) {
txtHeight.val('');
txtWeight.val('');
ddlDevice.val('');
}
}
cbDeclined.click(function () {
if (cbDeclined.is(':checked'))
cbIsOOfFac.attr('checked', false);
UpdateTextBoxes();
});
cbIsOOfFac.click(function () {
if (cbIsOOfFac.is(':checked'))
cbDeclined.attr('checked', false);
UpdateTextBoxes();
});
问题出现在:用户在txtWeight中输入内容,点击提交以获取ddlDevice& txtHeight要突出显示,因为它们是必需的,然后......用户点击cbDeclined& cbIsOOfFac。亮点不会消失。我试图弄清楚如何在高度附近突出显示并下降以消失。
我试图创建一个完全正常工作的jsFiddler,但我无法得到任何工作,尽管一切看起来都是正确的。这是链接(我不能发布链接,所以我稍微扩展了一下)
jsfiddle dot net / scarleton / 9hDZQ / 12 /
如果您删除了最后一个/ 12 /,您将看到我的第一个版本是真实的剪切/粘贴。
根据建议我尝试添加$('form')。valid();一些地方。
当我将它添加到UpdateTextBoxes()函数的末尾时,它们突出显示,而不是我想要的。
当我在任一单选按钮的click()事件之后添加它时,文本将消失,但实际控件仍然突出显示。看起来规则的必需属性上的函数可能没有完全正常工作。真正有趣的是:当我输入高度时,单击,然后突出显示重量和设备并在其下面显示错误消息。当我单击其中一个单选按钮时,文本会消失,但突出显示不会消失。但是...高度没有突出显示,它保持正常。
答案 0 :(得分:1)
工作小提琴:http://jsfiddle.net/9hDZQ/15/(缺少高亮的CSS样式,但正确添加/删除了类)
当您选中其中一个框时,没有代码告诉验证插件重新检查表单。在每个点击处理程序的底部添加$('form').valid();
以强制重新验证对我有效:
cbDeclined.click(function () {
if (cbDeclined.is(':checked'))
cbIsOOfFac.attr('checked', false);
UpdateTextBoxes();
$('form').valid();
});
cbIsOOfFac.click(function () {
if (cbIsOOfFac.is(':checked'))
cbDeclined.attr('checked', false);
UpdateTextBoxes();
$('form').valid();
});