我想验证我的表单，因此它位于两个空白字段之外，必须至少填充一个字段，并且还可以填充两个字段;但不能将任何字段留空。
我正在使用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."));
仍未获得惨淡的输出。
答案 0 :(得分：19)
您正在尝试使用属于the jQuery Validate plugin的validator.addMethod。如果你还没有，你需要在你的代码中包含这个插件。
然后使用已属于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/
require_from_group方法 编辑：As per Github, there is an open issue。在修复之前，开发人员会在下面推荐此解决方案。由于您将手动将修改后的方法添加到代码中，因此无需包含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"]
}
}
});
});
答案 1 :(得分：0)
@Sparky我正在尝试使用您的答案来验证帐户名称和/或密码的更新。我输入原始帐户名和密码，然后单击更新按钮并执行原始帐户名和密码的验证（即，没有消息说必须输入新的帐户或密码）。我的代码是：
$(document).ready(function(){
$.validator.addMethod(
"regex",
function(value, element, regexp)
{
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},
"Please enter correct Characters."
);
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 a new Account name and/or a new password'/Please fill out at least {0} of these fields."));
$('[data-toggle="tooltip"]').tooltip();
$("#contactForm").validate({
groups: { // consolidate messages into one
names: "accountName1 enterPassword1"
},
rules: {
accountName: {
required: true,
minlength: 2
},
enterPassword: {
required: true,
minlength: 8
},
accountName1: {
require_from_group: [1, ".send"],
minlength: 2
},
accountName2: {
minlength: 2,
equalTo: "#accountName1"
},
enterPassword1: {
require_from_group: [1, ".send"],
regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
minlength: 8
},
enterPassword2: {
regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
minlength: 8,
equalTo: "#enterPassword1"
}
},
messages: {
accountName: {
required: "Please enter your current account name.",
minlength: "Your account name must consist of at least 2 characters."
},
enterPassword: {
required: "Please enter your current password.",
minlength: "Your password must consist of at least 8 characters."
},
accountName1: {
minlength: "Your account name must consist of at least 2 characters."
},
accountName2: {
minlength: "Your account name must consist of at least 2 characters.",
equalTo: "Your confirmation account name does not match the original."
},
enterPassword1: {
regex: "Please nter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..",
minlength: "Your password must consist of at least 8 characters."
},
enterPassword2: {
regex: "Please enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..",
minlength: "Your password must consist of at least 8 characters.",
equalTo: "Your confirmation password does not match the original."
}
},
submitHandler : function(contactForm) {
//do something here
var frm = $('#contactForm');
//alert($("#accountName1").val());
$.ajax({
type: "POST",
url: "UpdateAccountView",
cache: false,
data: frm.serialize(),
success: function(data){
console.log('Submission was successful.');
console.log(data);
$("#accountName").focus();
$('#ajaxGetUserServletResponse').text(data);
}
});
}
});
}); // end document.ready