我想验证我的表单,以便没有两个空白字段,至少必须填写一个字段,也可以填写两个字段;但不能将任何字段留空。
我正在使用 jquery-1.9.1-min.js,这是我的 html 页面。
<form action="#" class="send_form" id="forgot_pass_form" method="POST">
<fieldset>
<div class="send_row">
<label class="padding-top10">Email</label>
<input type="text" class="send_email" id="email" name="email" />
<em>You need to type an email address</em>
</div>
<div class="send_row option">OR</div>
<div class="send_row">
<label class="padding-top10">Username</label>
<input type="text" class="send_username" id="uname" name="uname" />
</div>
<div class="send_row send_submitforgotuser">
<input type="submit" value="Submit" />
</div>
</fieldset>
</form>
有什么建议吗......?
到目前为止我已经尝试过
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
alert("xxx");
var valid = $(options[1], element.form).filter(function() {
return $(this).val();
}).length >= options[0];
if(!$(element).data('reval')) {
var fields = $(options[1], element.form);
fields.data('reval', true).valid();
fields.data('reval', false);
}
return valid;
}, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields."));
仍然没有得到有效的输出。
最佳答案
您正在尝试使用 validator.addMethod
,它是 the jQuery Validate plugin 的一部分。如果您还没有在代码中包含此插件,则需要这样做。
然后使用 the Validate plugin's additional-methods.js
file 中已经包含的 require_from_group
规则。 (不要忘记也包含 additional-methods.js
文件。)
rules: {
myfieldname: {
require_from_group: [1, ".class"]
}
}
- 第一个参数是需要的项目数量。
第二个参数是分配给分组中所有元素的
class
。我向您的两个输入元素添加了一个send
类。也可以使用 the
groups
option将两条消息合并为一条消息。
jQuery:
$(document).ready(function () {
$('#forgot_pass_form').validate({ // initialize the plugin
groups: { // consolidate messages into one
names: "uname email"
},
rules: {
uname: {
require_from_group: [1, ".send"]
},
email: {
require_from_group: [1, ".send"]
}
}
});
// for your custom message
jQuery.extend(jQuery.validator.messages, {
require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
});
});
工作演示:http://jsfiddle.net/sgmvY/1/
<小时/>编辑:As per Github, there is an open issue使用 require_from_group
方法。在修复之前,开发人员推荐下面的解决方案。由于您需要手动将修改后的方法添加到代码中,因此无需包含 additional-methods.js
文件。
新工作演示:http://jsfiddle.net/kE7DR/2/
$(document).ready(function () {
jQuery.validator.addMethod("require_from_group", function (value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var fields = $(selector, element.form);
var filled_fields = fields.filter(function () {
// it's more clear to compare with empty string
return $(this).val() != "";
});
var empty_fields = fields.not(filled_fields);
// we will mark only first empty field as invalid
if (filled_fields.length < numberRequired && empty_fields[0] == element) {
return false;
}
return true;
// {0} below is the 0th item in the options field
}, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields."));
$('#forgot_pass_form').validate({ // initialize the plugin
groups: {
names: "uname email"
},
rules: {
uname: {
require_from_group: [1, ".send"]
},
email: {
require_from_group: [1, ".send"]
}
}
});
});
关于jQuery Validate,在两个空白字段中,至少必须填写一个字段或同时填写两个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15136943/