3 つのフィールドとボタンがあります。
<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<input type="button" id="d" />
<label for="all_fields" class="error" style="display:none;">Please fill exactly one field</label>
テキストで満たされた 1 つのフィールドだけを検証するために、jquery バリデータ プラグインを使用したいと考えています。それを行う最良の方法は何ですか？
@Tats_innit の投稿に小道具を追加するだけです。
forの 1.10.0 リリース バージョンについて、github に未解決の問題がありrequire_from_groupます。additional-method-1.10.jsjquery.validation
githubの問題: require_from_groupは他のルールを無効にします
smileyanp@github は、@Tats_innit の関数を再利用したソリューションでこの投稿を引用し、それが正しく機能することを示すテストを作成し、.require_from_group
この投稿は、このような小さな詳細のために3時間のグーグルを燃やしたため、時間を節約するためにここにあります..
修理：
ロードadditional-method-1.10.js後にこのコードを更新または実行するだけです (関数を上書きするため)。additional-method-1.10.js
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."));
実際のデモ for A / B / Cケース: http://jsfiddle.net/hfLwB/
動作: 入力フィールドの 1 つに nu,her 値が設定されている限り、計算を実行できます。3 つのフィールドがすべて空の場合、エラーが発生します。.at_least_one classとaddMthod:にも注意してくださいrequire_from_group。
Anyhoo コードはより適切に話す必要があります。
良いリンク: http://docs.jquery.com/Plugins/Validation
それが役に立てば幸い ：）
HTML
<form action="results.whatever" target="_blank" id="HULK">
<div style="clear:both">
<label for="a">A</label>
<div style="float:right">
<input name="a" type="text" class="at_least_one idleField"></div>
</div>
<div style="clear:both">
<label for="b">B</label>
<div style="float:right">
<input name="b" type="text" class="at_least_one idleField">
</div>
</div>
<div style="clear:both">
<label for="c">C</label>
<div style="float:right">
<input name="c" type="text" class="at_least_one idleField">
</div>
</div>
<div id="button">
<input name="" type="submit" value="Calculate" class="calc_button" style="cursor:hand">
</div>
</form>
<div id="errorContainer">
<h4>errors</h4>
<ol>
</ol>
</div>
コード
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."));
$(document).ready(function(){
var container = $('#errorContainer');
$("#HULK").validate( {
// We must to force validation of entire form because
// when we remove value from 2-nd field
// the 1-st field becomes invalid.
onfocusout: function() { $("#HULK").valid() },
onkeyup: function() { $("#HULK").valid() },
rules: {
// note: you can use variable to avoid repeating
// of the same code
a: {
number: true,
require_from_group: [1, ".at_least_one"]
},
b: {
number: true,
require_from_group: [1,".at_least_one"]
},
c: {
number: true,
require_from_group: [1,".at_least_one"]
}
},
success: function(label) {
label.html(" ").addClass("checked");
},
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate"
});
});
この修正を行っても、magento サイトに require_from_group を使用しようとしましたが、まったく機能しませんでした。あまりにも多くの時間を無駄にした後、html の title 属性を使用して magento に絞り込みました。入力フィールドにタイトル属性がある場合、エラーメッセージの代わりにタイトルがエラーメッセージとして表示されます。
これが他の人の時間を節約するのに役立つことを願っています!!