jQuery validation을 "selected" 플러그인과 함께 사용하려면 어떻게 해야 합니까?
저는 조금 가지고 있어요.<select>선택한 플러그인을 사용하여 입력하는 경우 클라이언트 측에서 "필수"로 확인합니다."selected"는 실제 선택 요소를 숨기고 div와 span으로 위젯을 만들기 때문에 기본 HTML5 유효성 검사가 제대로 작동하지 않는 것 같습니다.양식이 제출되지 않지만(좋음) 오류 메시지가 표시되지 않아 사용자는 무엇이 잘못되었는지(좋음) 알 수 없습니다.
jQuery validation plugin(어차피 사용할 계획이었지만)으로 돌아섰지만 지금까지 운이 없었습니다.테스트 케이스는 다음과 같습니다.
<form>
<label>Name: <input name="test1" required></label>
<label>Favorite Color:
<select name="test2" required>
<option value=""></option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</label>
<input type="submit">
</form>
$(document).ready(function(){
$('select').chosen();
$('form').validate();
});
이것은 그들에게.select오류 메시지를 확인하거나 표시하지 않고 빈 값으로 through를 수행합니다.제가 댓글을 달면.chosen()라인, 잘 작동합니다.
검증 방법은 어떻게 확인할 수 있습니까?chosen()jQuery validation plugin으로 입력하고 잘못된 입력에 대한 오류 메시지를 표시합니까?
jQuery validate는 숨겨진 요소를 무시하고 Chosen 플러그인이 추가되므로visibility:hiddenselect, try:
$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select
오어
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) //for all select having class .chosen-select
바로 전에 이 줄을 추가합니다.validate()기능.저는 잘 작동합니다.
jQuery validation은 숨겨진 요소를 선택하지 않지만, 개별 요소의 validation을 강제로 수행할 수 있습니다.약간의 해킹이지만, 다음이 효과가 있을 것입니다.
$('form').on('submit', function(e) {
if(!$('[name="test2"]').valid()) {
e.preventDefault();
}
});
사용할 수 있는 "선택한" 요소만 선택하려면$('.chzn-done')
내 것에
제 폼에는 클래스 'validate'가 있고 모든 입력 요소에는 클래스 'required' html 코드가 있습니다.
<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
<div class="control-group">
<label class="control-label" for="sku">SKU</label>
<div class="controls">
<input id="sku" class="required span6" type="text" name="sku">
</div>
</div>
<div class="control-group">
<label for="supplier" class="control-label">Supplier</label>
<div class="controls">
<select name="supplier" id="supplier" class='cho span6 {required:true} '>
<option value=''>-- PILIH --</option>
<?php
foreach ($result as $res)
{
echo '<option value="'.$res['tbl_suppliers']['kode_supplier'].'">'.$res['tbl_suppliers']['nama_supplier'].'</option>';
}
?>
</select>
</div>
</div>
</form>
jquery validation으로 선택할 수 있는 javascript 코드
$(document).ready(function() {
// - validation
if($('.validate').length > 0){
$('.validate').validate({
errorPlacement:function(error, element){
element.parents('.controls').append(error);
},
highlight: function(label) {
$(label).closest('.control-group').removeClass('error success').addClass('error');
},
success: function(label) {
label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
},
//validate choosen select (select with search)
ignore: ":hidden:not(select)"
});
}
// - chosen, add the text if no result matched
if($('.cho').length > 0){
$(".cho").chosen({no_results_text: "No results matched"});
}
});
참고: 입력 값이 null이면 클래스 오류가 상위 'div'에 추가됩니다.
//선택한 요소를 숨기는 다른 방법을 사용하여 이 문제를 해결할 수 있습니다. 예를 들어...
$(document).ready(function() {
$.validator.addMethod( //adding a method to validate select box//
"chosen",
function(value, element) {
return (value == null ? false : (value.length == 0 ? false : true))
},
"please select an option"//custom message
);
$("form").validate({
rules: {
test2: {
chosen: true
}
}
});
$("[name='test2']").css("position", "absolute").css("z-index", "-9999").chosen().show();
//validation.....
$("form").submit(function()
{
if ($(this).valid())
{alert("valid");
//some code here
}
return false;
});
});
이 간단한 CSS 규칙은 joomla 3의 선택된 것의 구현에서 작동합니다.
선택한 항목이 숨겨진 선택 입력에 잘못된 클래스를 추가하므로 이를 사용하여 선택한 선택 상자를 대상으로 지정합니다.
.invalid, .invalid + div.chzn-container a {
border-color: red !important;
}
나는 배치해야만 했습니다.$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
밖으로.$(document).ready(function())selected.js와 함께 작업하기 위해서입니다.
https://stackoverflow.com/a/10063394/4063622
선택 드롭다운 목록 앞에 오류 메시지가 표시되는 문제가 발생할 수도 있습니다.나는 이 문제를 해결할 해결책을 찾았고 여기에 내 코드를 붙여넣어 당신과 공유합니다.
HTML:
<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>
자바스크립트:
if (!$('#ddlSponsorLevel').valid()) {
$('#ddlSponsorLevel-error').text("You must choose a sponsor level");
return false;
}
Jquery Validation은 실제로 숨겨진 레이블 html 요소를 추가했습니다.이 요소를 다른 위치에 동일한 ID로 재정의하여 원래 위치를 덮어쓸 수 있습니다.
저는 이 일에 하루 정도 시간을 보냈지만 운이 전혀 없었습니다!그리고 Vtiger가 사용하던 소스코드를 살펴보니 금이 발견되었답니다!그들이 이전 버전을 사용하고 있었지만 열쇠를 가지고 있었습니다! 당신은 사용해야 합니다.
data-validation-engine="validate[required]"
그렇지 않은 경우 선택한 클래스를 통과한 클래스가 선택한 클래스에 적용되고 선택한 클래스가 업데이트되지 않는 것으로 간주됩니다.선택한 학생에게 수업을 전달하지 않으면 이 문제가 발생하지만, 이렇게 해야만 효과가 있습니다.
이것은 선택된 1.4.2 검증 엔진 2.6.2 및 jquery 2.1.4와 함께 합니다.
// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
prettySelect : true,
useSuffix: "_chosen"
//promptPosition : "bottomLeft"
});
@아누팔은 나를 올바른 길로 인도해주었지만 어찌된 일인지 복잡한 수정이 필요했습니다.
가능하게 하다.chosen할 만한
자바스크립트
$.validator.setDefaults({ ignore: ":hidden:not(.chosen)" })
아니면 당신이 선택한 사람들에게 주는 다른 이름.글로벌 구성입니다.최상위 레벨 설정 고려
선택한 사용자 지정 규칙 만들기
html
<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
<option value="">Please select…</option>
</select>
자바스크립트
대한 구성, $.validator물건. 명령어 이전 명령 옆에 놓을 수 있습니다 옆에 수 .
$.validator.addMethod('chosen-required', function (value, element, requiredValue) {
return requiredValue == false || element.value != '';
}, $.validator.messages.required);
jQuery("#formID").validationEngine({
prettySelect : true,
useSuffix: "_chzn"
});
jQuery-Validation-엔진/데모선택 라이브러리
다음을 시도해 볼 수도 있습니다.
$('form').on('submit', function(event) {
event.preventDefault();
if($('form').valid() == true && $('.select-chosen').valid() == true){
console.log("Valid form");
} else {
console.log("Invalid form");
}
});
추가하는 것을 기억하세요..select-chosen에 대한selects.
$('.select-chosen').valid()합니다에 대한 유효성 합니다.selects
내 양식에는 선택한 숨겨진 필드가 유효성 검사에 실패하는 것을 방지하기 위해 조건부 숨김 필드가 포함되어 있습니다. 기본 ignore:hidden을 조금 더 확장했습니다.
$.validator.setDefaults({
ignore: ":hidden:not(.chosen-select + .chosen-container:visible)" //for all select having class .chosen-select
})이것이 더 나은 해결책이라고 생각합니다.
//trigger validation onchange
$('select').on('change', function() {
$(this).valid();
});
$('form').validate({
ignore: ':hidden', //still ignore Chosen selects
submitHandler: function(form) { //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here
var $selects = $(form).find('select'),
valid = true;
if ($selects.length) {
//validate selects
$selects.each(function() {
if (!$(this).valid()) {
valid = false;
}
});
}
//only submit the form if all fields have passed validation
if (valid) {
form.submit();
}
},
invalidHandler: function(event, validator) { //one or more fields have failed validation, but the Chosen selects have not been validated yet
var $selects = $(this).find('select');
if ($selects.length) {
validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason
//validate selects
$selects.each(function(index){
validator.element(this);
})
}
},
//other options...
});
참고: 또한 변경해야 합니다.errorPlacement콜백을 통해 오류 표시를 처리합니다.다를 ..siblings('.errorMessageClassHere') 다른 (DOM로는).next('.errorMessageClassHere').
2018년에 저는 jQuery validate가 이름이 없는 입력 필드에 대해 불평하고 있음을 확인하고 있습니다.이 입력 필드에는 jQuery Choosen 플러그인이 추가됩니다.
이 버그는 선택한 사용 시 무엇보다도 먼저 발생합니다.
이 답변 감사합니다. https://stackoverflow.com/a/40310699/4700162 i resolve the issue:
파일 안에 Choosen이 있습니다.jquery.js, 변경
this.form_field_jq.hide().after(this.container);
이 경우:
this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);
jQuery validation을 "choosed" 플러그인에 사용할 수 있습니다.저는 잘 일하고 있습니다.
$('.chosen').chosen({
allow_single_deselect: true
});
$.validator.setDefaults({ ignore: ":hidden:not(select)" });
$('form').validate({
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block text-danger',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element.parent());
}
}
});
selected() 호출 후 jquery method 아래 사용
$("#id").css("display":"").adClass("sr-only");
sr-only is boot strap class
저는 결국 다음과 같이 해결했습니다.
Choosen v1.8.7의 경우:
- selected.js를 열고 199번 라인에서 다음을 찾습니다.
this.form_field_jq.hide().after(this.container),
- 다음 항목으로 대체합니다.
this.form_field_jq.addClass('chosen-master').after(this.container),
- 다음 CSS 특성을 해당 클래스에 추가합니다.
.chosen-master {
display: inline-block !important;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
}
참조 : https://stackoverflow.com/a/64491538/7353382
언급URL : https://stackoverflow.com/questions/11232310/how-can-i-use-jquery-validation-with-the-chosen-plugin
'programing' 카테고리의 다른 글
| 워드프레스 webp 이미지 미리보기 (0) | 2023.09.26 |
|---|---|
| 드라이버와 프로바이더의 차이 (0) | 2023.09.21 |
| LOAD DATA LOCAL INFILE을 실행하는 Powershell에서 오류 발생 (0) | 2023.09.21 |
| Google Chrome 북마크 기능 (0) | 2023.09.21 |
| JSON_OBJECT 값으로 mysql 결과 주문 (0) | 2023.09.21 |