페이지에 여러 양식이 있으며 각 양식에는 이미 문제없이 구현 된 유효성 검사가 있습니다. 일부 상황으로 인해 jQuery 유효성 검사에 addMethod를 사용하여 select2.js를 원하는대로 작동시켜야했습니다. select 값이 0이면 유효성 검증을 위해 false를 리턴해야한다. addMethod는 1 폼에서 작동합니다. 다른 폼의 addMethod를 추가하면 유효성 검사가 제대로 작동하지 않는 것 같습니다.jQuery 다중 양식 유효성 검사 추가 방법이있는 1 페이지
시나리오
은 "보고서"버튼을 클릭이 왼쪽으로 가기> 다음 전환율 보고서 버튼 양식이 표시됩니다 중 하나를 클릭 "검색"버튼을 클릭 한 후 오류 메시지 표시됩니다. 기본적으로 오류 메시지는 입력 필드에 값이있을 때마다 사라집니다. select2 드롭 다운에 대해서는 오류 메시지가 "국가 선택"대신에 값이 있더라도 여전히 이상하게 남아 있습니다. 현재로서는 다른 양식을 열어도 오류 메시지가 계속 유지됩니다. 이제 "국가 보고서"버튼을 클릭하면 다른 양식이 나타나고 검색 버튼을 클릭하면 입력 필드가 비어있어 오류 메시지가 표시됩니다. 이제 select2 드롭 다운에서 국가를 선택하십시오. 오류 메시지가 사라졌습니다 (양호). 이 과정에서 전환율 보고서 양식으로 돌아 가면 select2 오류 메시지가 사라집니다. 심지어 선택을 변경하면 더 이상 오류 메시지가 표시되지 않습니다.
나는 많은 것을 알고 있지만 동료 "중급"프런트 엔드 개발자에게 도움을주십시오. 감사합니다!
HTML 요소 그것은 onKeyUp 아니다
<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();
});
});