以下の jQuery を使用して複数のグループを検証していますが、コードをこのリンクのメソッドJquery .validate require_from_groupに更新した後、以前は正常に機能していた 2 番目のグループを除いてすべてが検証されるという問題が発生しています。
$("#contact-form").validate({
groups: {
links: "link_fb link_yt link_db",
checkboxes: "tracking mixing mastering reamping editing other"
},
rules: {
'link_fb': {
require_from_group: [1, ".link_group"]
},
'link_yt': {
require_from_group: [1, ".link_group"]
},
'link_db': {
require_from_group: [1, ".link_group"]
},
'tracking': {
require_from_group: [1, ".checkbox_group"]
},
'mixing': {
require_from_group: [1, ".checkbox_group"]
},
'mastering': {
require_from_group: [1, ".checkbox_group"]
},
'reamping': {
require_from_group: [1, ".checkbox_group"]
},
'editing': {
require_from_group: [1, ".checkbox_group"]
},
'other': {
require_from_group: [1, ".checkbox_group"]
}
},
errorPlacement: function (error, element) {
console.log(element[0])
if(element[0].value === "tracking")
{
error.insertBefore(element);
}
else {
error.insertAfter(element);
}
}
});
フォームのマークアップは次のとおりです。
<!--Request Quote modal-->
<div id="request-quote" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Request a quote</h3>
</div>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="modal-body contact-body">
<div class="row-fluid">
<div class="span12">
<h4>*All information is required unless otherwise specified</h4>
<p><label>Full Name</label>
<input name="name" type="text" class="span12" required></p>
<p><label>Band Name</label>
<input name="band_name" type="text" class="span12" required></p>
<p><label>Email</label>
<input name="email" type="email" class="span12" required></p>
</div>
</div>
<div class="row-fluid">
<h5 class="span12">Links to your band (at least one is required)</h5>
</div>
<div class="row-fluid">
<div class="span12">
<p><label>Facebook</label>
<input name="link_fb" type="text" class="span12 link_group"></p>
<p><label>YouTube</label>
<input name="link_yt" type="text" class="span12 link_group"></p>
<p><label>Dropbox (Send me some of your band's prior material)</label>
<input name="link_db" type="text" class="span12 link_group"></p>
</div>
</div>
<div class="row-fluid">
<h5 class="span12">What are you looking for?</h5>
</div>
<div class="row-fluid">
<div class="span4">
<p><label>Select all that apply:</label></p>
<p class="form-boxes"><label class="hand">
<input name="tracking" type="checkbox" value="tracking" class="checkbox_group"> Tracking
</label>
<label class="hand">
<input name="mixing" type="checkbox" value="mixing" class="checkbox_group"> Mixing
</label>
<label class="hand">
<input name="mastering" type="checkbox" value="mastering" class="checkbox_group"> Mastering
</label>
<label class="hand">
<input name="reamping" type="checkbox" value="reamping" class="checkbox_group"> Reamping
</label>
<label class="hand">
<input name="editing" type="checkbox" value="editing" class="checkbox_group"> Editing
</label>
<label class="hand">
<input name="other" type="checkbox" value="other" class="checkbox_group"> Other
</label></p>
</div>
<div class="span8">
<p><label>Number of Songs</label>
<input name="songs" type="text" class="span12" required></p>
<p><label>Explain your project/needs (and if you selected "other", please clarify)</label>
<textarea name="comments" class="span12" required></textarea></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-inverse">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
<!--/Request Quote modal-->
何が起きているのか、誰にもアイデアがありますか？
ありがとう！
編集：
これが最新のrequire_from_groupメソッドです（メインのgithubブランチにはありません）。これを使用して私の問題が表示されます：
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 fill out at least {0} of these fields."));
EDIT2：
問題を示す jsfiddle を次に示します。