이름 값 대신 클래스를 사용하는 jQuery 유효성 검사
jquery validate 유효성을 검사하고 싶지만 html 내에서 '이름'을 사용할 수 없습니다. 이것은 서버에서 사용되는 필드이기 때문입니다. 특히 그룹에서 선택하는 선택의 수를 제한해야합니다. (최대 3 개) 내가 본 모든 예제는 각 요소의 이름 속성을 사용합니다. 내가하고 싶은 것은 클래스를 대신 사용하고 그에 대한 규칙을 선언하는 것입니다.
HTML
작동합니다 :
<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation" value="1" />
이것은 작동하지 않지만 내가 목표로하는 것입니다.
<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" />
자바 펼쳐 :
var validator = $(".formToValidate").validate({
rules:{
"salutation":{
required:true,
},
"checkBox":{
required:true,
minlength:3 }
}
});
이것이 가능한 방법?-규칙 옵션 내에서 대신 클래스를 대상으로하는 방법이 있습니까? 아니면 사용자 지정 방법을 추가해야합니까?
건배, 매트
를 사용하여 해당 선택기를 기반으로 규칙을 추가하고 유효성 검사 옵션에서 클래스 기반으로 원하는 규칙을 제거하고 한 후 다음을 수행합니다..rules("add", options)$(".formToValidate").validate({... });
$(".checkBox").rules("add", {
required:true,
minlength:3
});
할 수있는 또 다른 방법은 addClassRules를 사용하는 것 입니다. 클래스에 따라 다르지만 선택기와 .rules를 사용하는 옵션은보다 일반적인 방법입니다.
전화하기 전에
$(form).validate()
다음과 같이 사용하십시오.
jQuery.validator.addClassRules('myClassName', {
required: true /*,
other rules */
});
참조 : http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules
나는 이와 같은 경우 에이 구문을 선호합니다.
나는 이것이 오래된 질문이라는 것을 알고 있습니다. 하지만 나도 최근에 같은 것이 필요하고,이 질문은 stackoverflow +이 블로그의 또 다른 답변에서 얻었습니다. 블로그에있는 진보은 다만 종류의 유효성 검사에 한정을 맞추기 때문에 더 간단했습니다. 방법은 다음과 가변합니다.
$.validator.addClassRules("price", {
required: true,
minlength: 2
});
이 메서드는 호출에 메서드를 필요로하지 않습니다.
이것이 미래의 누군가에게 도움이되기를 바랍니다. 여기에 소스 .
다음은 jQuery를 사용하는 솔루션입니다.
$().ready(function () {
$(".formToValidate").validate();
$(".checkBox").each(function (item) {
$(this).rules("add", {
required: true,
minlength:3
});
});
});
내 솔루션은 다음과 같습니다 (jQuery가 필요하지 않습니다 ... JavaScript 만).
function argsToArray(args) {
var r = []; for (var i = 0; i < args.length; i++)
r.push(args[i]);
return r;
}
function bind() {
var initArgs = argsToArray(arguments);
var fx = initArgs.shift();
var tObj = initArgs.shift();
var args = initArgs;
return function() {
return fx.apply(tObj, args.concat(argsToArray(arguments)));
};
}
var salutation = argsToArray(document.getElementsByClassName('salutation'));
salutation.forEach(function(checkbox) {
checkbox.addEventListener('change', bind(function(checkbox, salutation) {
var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
if (numChecked >= 4)
checkbox.checked = false;
}, null, checkbox, salutation), false);
});
펼쳐 블록의 이것을 끝에 넣으면 <body>스 니펫이 마법을 수행하여 체크 박스의 수를 최대 3 개 (또는 지정한 수)로 제한합니다.
여기에서는 페이지도 제공 할 것입니다.
<!DOCTYPE html><html><body>
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<script>
function argsToArray(args) {
var r = []; for (var i = 0; i < args.length; i++)
r.push(args[i]);
return r;
}
function bind() {
var initArgs = argsToArray(arguments);
var fx = initArgs.shift();
var tObj = initArgs.shift();
var args = initArgs;
return function() {
return fx.apply(tObj, args.concat(argsToArray(arguments)));
};
}
var salutation = argsToArray(document.getElementsByClassName('salutation'));
salutation.forEach(function(checkbox) {
checkbox.addEventListener('change', bind(function(checkbox, salutation) {
var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
if (numChecked >= 3)
checkbox.checked = false;
}, null, checkbox, salutation), false);
});
</script></body></html>
나를 위해, 일부 요소는 페이지로드시 생성되고 일부는 사용자가 동적으로 추가합니다. 나는 이것을 사용하여 모든 것이 건조하게 유지했습니다.
출시시, 클래스 x가있는 모든 항목을 찾고, 클래스 x를 제거하고, 규칙 x를 추가하십시오.
$('#form').on('submit', function(e) {
$('.alphanumeric_dash').each(function() {
var $this = $(this);
$this.removeClass('alphanumeric_dash');
$(this).rules('add', {
alphanumeric_dash: true
});
});
});
사용자 정의 방법을 추가 할 수 있습니다.
(이 경우 하나 이상의 선택됨)
<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" onclick="test($(this))"/>
자바 펼쳐
var tags = 0;
$(document).ready(function() {
$.validator.addMethod('arrayminimo', function(value) {
return tags > 0
}, 'Selezionare almeno un Opzione');
$.validator.addClassRules('check_secondario', {
arrayminimo: true,
});
validaFormRichiesta();
});
function validaFormRichiesta() {
$("#form").validate({
......
});
}
function test(n) {
if (n.prop("checked")) {
tags++;
} else {
tags--;
}
}
'ProgramingTip' 카테고리의 다른 글
| 클로저 : 왜 그렇게 유용할까요? (0) | 2021.01.05 |
|---|---|
| 표준 라이브러리에서 가장 유용한 Python 모듈? (0) | 2021.01.05 |
| 들여 쓰기를 사용하여 HTML을 파일로 예쁜 인쇄하는 방법 (0) | 2021.01.05 |
| Heroku https 사양을 만드는 방법은 무엇입니까? (0) | 2021.01.05 |
| 한 번에 여러 목록을 반복하는 가장 좋은 방법은 무엇입니까? (0) | 2021.01.05 |