jQuery验证，在两个空白字段中，至少必须填写一个字段，或者都必须填写 [英] jQuery Validate, out of two blank fields, at least one field must be filled or both
问题描述
我要验证我的表单，使其不属于两个空白字段，至少必须填写一个字段，并且还可以填写两个字段；但不能将任何字段留空.
我正在使用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插件.如果还没有，则需要在代码中包含此插件.
然后使用require_from_group规则，该规则已经是验证插件的additional-methods.js文件. (不要忘记也包含additional-methods.js文件.)
rules: {
myfieldname: {
require_from_group: [1, ".class"]
}
}
- 第一个参数是所需的项目数.
-
第二个参数是分配给分组中所有元素的
class.我在您的两个输入元素中添加了send类. -
还使用
groups选项将这两条消息合并为一个. /p>
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/
编辑:根据Github，存在一个未解决的问题 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"]
}
}
});
});
I want to validate my form so that is out of two blank fields, at least one field must be filled and two fields also can be filled; but can't leave any field blank.
I'm using jquery-1.9.1-min.js and here is my html page.
<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>
Any suggestion how to do it.... ?
sofar I have tried
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."));
Still not getting friutful output.
You are attempting to use validator.addMethod which is part of the jQuery Validate plugin. You'll need to include this plugin in your code if you haven't already.
Then use the require_from_group rule that's already part of the Validate plugin's additional-methods.js file. (Don't forget to include the additional-methods.js file too.)
rules: {
myfieldname: {
require_from_group: [1, ".class"]
}
}
- First parameter is the number of items to be required.
Second parameter is the
classassigned to all elements in your grouping. I added asendclass to your two input elements.Also use the
groupsoption to consolidate the two messages into one.
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.")
});
});
Working Demo: http://jsfiddle.net/sgmvY/1/
EDIT: As per Github, there is an open issue with the require_from_group method. Until it's fixed, the developer is recommending this solution below. Since you would manually add the revised method into your code, there is no need to include the additional-methods.js file.
New Working Demo: 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验证，在两个空白字段中，至少必须填写一个字段，或者都必须填写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
