このページには複数のフォームが含まれていますが、それぞれに既に問題なしで実装された検証があります。いくつかの状況のために、jQueryの検証にaddMethodを使用して、select2.jsを必要に応じて動作させる必要がありました。 selectの値が0の場合、検証のためにfalseを返す。 addMethodは1つのフォームで動作します。他のフォームのaddMethodを追加すると、検証が正しく機能していないようです。1つのページで複数のフォームの検証を追加する方法
シナリオ
左トップに「レポート」ボタンをクリック>、フォームのいずれかが表示され、その後変換レートのレポート]ボタンをクリックし、「検索」ボタンは、エラー・メッセージをクリックしてください表示されます。デフォルトでは、入力フィールドに値が入っていると、それぞれエラーメッセージが表示されます。 select2のドロップダウンでは、単に「国を選択」ではなく、値が入っていても、エラーメッセージが残っています。現在のところ、エラーメッセージは、別のフォームを開く場合でも保持されます。 "country report"ボタンをクリックすると、別のフォームが表示され、検索ボタンをクリックすると、入力フィールドが空であるためエラーメッセージが表示され、select2ドロップダウンから国を選択します。エラーメッセージが消えた（正常）。この間、コンバージョン率レポートフォームに戻ると、select2エラーメッセージが表示されます。たとえ私がその中の選択を変更したとしても、それはもはやエラーメッセージをトリガーしません。
私は多くのことを知っていますが、仲間の "中間"フロントエンドの開発者に感謝してください。
HTML要素
<form id="search_country_report_form" action="con_sum.html">
<span class="close_search_pop lnr lnr-cross"></span>
<div class="report_search block_padding">
<h2>Search Country report</h2>
<ul class="report_search_date_range clearfix">
<li><span><b>Date range*</b></span></li>
<li>
<label>From</label><input type="text" readonly="readonly" name="startStringDate" id="search_country_date_from" />
</li>
<li>
<label>to</label><input type="text" readonly="readonly" name="endStringDate" id="search_country_date_to" />
</li>
</ul>
<ul class="report_search_top_cat clearfix">
<li>
<label><b>Country name*</b></label>
<select id="search_country_country_name" name="countryName">
<option value="0">Select country</option>
<option value="TH">Country #1</option>
<option value="MY">Country #2</option>
</select>
</li>
</ul>
<div class="btn_wrap clearfix">
<button class="search_btn" type="submit">Search</button>
</div>
</div>
</form>
jQueryのスクリプト
$("form").each(function() {
var search_country_report = $('#search_country_report_form');
$.validator.addMethod("countryNameCheck", function (value) {
var theField = $("#search_country_country_name");
if (theField.val() === '0') {
console.log($("#search_country_country_name").val());
return false;
} else {
return true;
console.log($("#search_country_country_name").val());
}
});
var validobj = search_country_report.validate({
rules: {
startStringDate: {
required: true
},
endStringDate: {
required: true
},
countryName: {
required: true,
countryNameCheck: true
}
},
messages: {
startStringDate: "Required",
endStringDate: "Required",
countryName: "Country name is required"
},
onKeyUp: true,
errorElement: 'span',
errorClass: "searchErrorText",
errorPlacement: function (error, element) {
var elem = $(element);
error.insertAfter(element);
},
highlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-offscreen")) {
$("#s2id_" + elem.attr("id") + " span").addClass(errorClass);
} else {
elem.addClass(errorClass);
}
},
unhighlight: function (element, errorClass, validClass) {
var elem = $(element);
if (elem.hasClass("select2-offscreen")) {
$("#s2id_" + elem.attr("id") + " span").removeClass(errorClass);
} else {
elem.removeClass(errorClass);
}
}
});
var thisParent = $('.select2-selection').parent();
$(document).on("change", thisParent, function() {
if (!$.isEmptyObject(validobj.submitted)) {
validobj.form();
}
});
$(document).on("select2-opening", function (arg) {
var elem = $(arg.target);
if ($("#s2id_" + elem.attr("id") + " span").hasClass("myErrorClass")) {
$(".select2-drop span").addClass("myErrorClass");
} else {
$(".select2-drop span").removeClass("myErrorClass");
}
});
search_country_report.submit(function() {
validobj.form();
});
});