Я хотел бы проверить форму с помощью плагина jquery validate, но я не могу использовать значение "name" в html - так как это поле также используется серверным приложением. В частности, мне нужно ограничить количество флажков, отмеченных в группе. (Максимум 3.). Все примеры, которые я видел, используют атрибут name для каждого элемента. Я хотел бы использовать класс вместо этого, а затем объявить для этого правило.
HTML
Это работает:
<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation" value="1" />
Это не работает, но для чего я стремлюсь:
<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy" value="1" />
JavaScript:
var validator = $(".formToValidate").validate({
rules:{
"salutation":{
required:true,
},
"checkBox":{
required:true,
minlength:3 }
}
});
Можно ли это сделать - существует ли способ ориентации класса вместо имени в параметрах правил? Или мне нужно добавить собственный метод?
Cheers, Matt
Вы можете добавить правила на основе этого селектора, используя .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);
});
Поместите это в блок script в конце <body>, и фрагмент сделает свою магию, ограничив количество флажков, отмеченных максимум тремя (или любым номером, который вы указали).
Здесь я даже дам вам тестовую страницу (вставьте ее в файл и попробуйте):
<!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>
Так как для меня некоторые элементы создаются при загрузке страницы, а некоторые динамически добавляются пользователем; Я использовал это, чтобы убедиться, что все осталось сухим.
В submit, найдите все с классом 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))"/>
в Javascript
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--;
}
}