jQuery验证 - 基于其他字段更改“必需”属性
我在我正在构建的表单上使用jQuery验证插件(http://docs.jquery.com/Plugins/Validation)。该表格由6个字段组成,每个字段包含3个用于电子邮件地址,名字和姓氏的文本输入。标记的简化版本如下:jQuery验证 - 基于其他字段更改“必需”属性
<form id="ref" action="submit.php" method="post">
<fieldset id="ref_1">
<input id="ref_1_email" type="text" />
<input id="ref_1_fname" type="text" />
<input id="ref_1_lname" type="text" />
</fieldset>
<fieldset id="ref_2">
<input id="ref_2_email" type="text" />
<input id="ref_2_fname" type="text" />
<input id="ref_2_lname" type="text" />
</fieldset>
<fieldset id="ref_3">
<input id="ref_3_email" type="text" />
<input id="ref_3_fname" type="text" />
<input id="ref_3_lname" type="text" />
</fieldset>
</form>
等等,直到ref_6。但是,用户不一定需要完成每个字段 - 他们可能只会选择填写fieldset#ref_1和fieldset#ref_2内的输入,并将其他字段留空。但是,例如,如果他们输入了ref_1的电子邮件,则还需要ref_1的名字和姓氏。所以我需要做的是检查一个字段集中的所有3个输入。如果它们全部是空白的,则可以忽略它们,但是如果其中一个输入被填充,则两个邻居也必须完成。到目前为止,我所有的尝试都非常麻烦(注意每个人的改变,然后评估是否空着......),任何帮助都会很大,非常感谢。
感谢
更新:
我发现一个帖子有类似的问题,有建议的解决方案之中:
$('#emailToName2').keyup(function() {
$('#emailToAddress2').toggleClass('required', $(this).val());
});
但这需要重复对每个输入上述逻辑,这对我来说似乎有点矫枉过正。什么会是一个更动态的方法?
干杯!
指示需要字段时,可以指定expression或callback。验证插件将在验证字段之前评估表达式或回调。
下面是一个例子:
$("#ref").validate({
rules: {
ref_1_email: {
required: function(element) {
return $("#ref_1_fname").val() || $("ref_1_lname").val();
}
}
}
});
$("#ref_1_email").blur(function() {
$("#ref_1_fname").valid();
$("#ref_1_lname").valid();
});
很可能有一些重构,你可以做,这样你就不必再重复所有这一切都为每个字段...
没试过也不正确书面形式:
$("#ref input").keyup(function() {
$(this).parents("fieldset").children("input").toggleClass("required", $(this).val());
});
您可以编写自己的自定义验证类,用于评估2个输入的其中一个是否已完成。
例如。
jQuery.validator.addMethod('MyOwnValidator', function(value, element) {
var required = false;
$(element).parent().children('input').each(function() {
if($(this).val() && $(this).attr('id') != $(element).attr('id')){
required = true;
}
});
return !required;
});
这将评估是否有任何兄弟输入有一个值,如果他们这样做,使呼叫输入需要。
这几乎就在那里!以下是我的规则(我将函数checkSiblings重命名为): [code] $('#ref')。validate({rules:{ref_1_email:{required:function(element){checkSiblings:true}} ,ref_1_fname:{required:function(element){checkSiblings:true}},ref_1_lname:{required:function(element){checkSiblings:true}}}}); [/ code] 但唯一的问题是,如果我清除所有的字段,它仍然按要求标记它们,因此表单不能被提交。有任何想法吗?非常感谢(给大家!) – AlvinRow 2009-11-17 11:00:13
你不能在一个循环内完成所有操作,因为你需要在切换类之前检查兄弟姐妹。但是,您可以定义一个可检查和应用的小型循环函数,但您需要多次调用它才能保持逻辑。
试试这个:
var loop = function(target, fn) {
var t = 0, fn = fn || function(){};
$(target).siblings().andSelf().each(function(i, el) {
t += $(el).val().length;
fn(el);
});
return t;
}
$('fieldset input').each(function() {
$(this).bind('blur', function(e) {
if(loop(e.target)) {
loop(e.target, function(el) {
$(el).toggleClass('required', !$(el).val().length);
})
} else {
loop(e.target, function(el) {
$(el).removeClass('required');
})
}
});
});
只是调查这一个项目。根据文档,以下应该做你想要的。
当第一次调用表单上validate
,像这样做:
$("#emailRecsForm").validate({
rules: {
ref_1_email: {
required: ("#ref_1_fname:filled" || "#ref_1_lname:filled"),
email: true
},
ref_1_fname: {
required: ("#ref_1_email:filled" || "#ref_1_lname:filled")
},
ref_1_lname: {
required: ("#ref_1_email:filled" || "#ref_1_fname:filled")
},
ref_2_email: {
required: ("#ref_2_fname:filled" || "#ref_2_lname:filled"),
email: true
},
// And so on...
}
});
此外,确保每个input
S的有一个name
属性等同于它id
。
我自己实际上没有尝试过,但通过the docs(请参阅required(dependency-expression)
)来判断,它应该有效。
感谢您的建议。我试图完成这项工作,但它似乎对其他“相关”字段应用一类“有效”,而不管它们是否为空。有任何想法吗? – AlvinRow 2009-11-16 15:36:17
如果第一部分中的其他字段中有一个值具有值,则此示例实际上只是使第一部分中的电子邮件处于必需状态。在'blur'事件处理程序可以正常工作之前,您需要为其他字段设置类似的规则... – bdukes 2009-11-16 19:07:47