Проверка jQuery с помощью класса вместо значения имени
Я хотел бы проверить форму с помощью jQuery, проверяют плагин, но я не могу использовать значение 'имени' в 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" />
JavaScript:
var validator = $(".formToValidate").validate({
rules:{
"salutation":{
required:true,
},
"checkBox":{
required:true,
minlength:3 }
}
});
Действительно ли возможно сделать, это - является там способом предназначаться для класса вместо имени в опциях правил? Или я должен добавить пользовательский метод?
С наилучшими пожеланиями, матовый
2 ответа
Вы можете добавить правила на основе этого селектора, используя .rules("add", options), просто удалите все правила, основанные на классе, из ваших опций validate, и после вызова $(".formToValidate").validate({...});, сделайте следующее:
$(".checkBox").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);
});
Поместите это в блок скрипта в конце и сниппет сделает свое волшебство, ограничив количество отмеченных флажков максимум тремя (или любым другим числом, которое вы укажете).
Здесь я даже дам вам тестовую страницу (вставьте ее в файл и попробуйте):
<!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>