Проверка jQuery с использованием classа вместо значения имени

Я хотел бы проверить форму с помощью модуля проверки правильности jquery, но я не могу использовать значение «name» в html – так как это поле также используется серверным приложением. В частности, мне нужно ограничить количество флажков, отмеченных в группе. (Максимум 3.). Все примеры, которые я видел, используют атрибут name для каждого элемента. То, что я хотел бы сделать, это использовать class вместо этого, а затем объявить для этого правило.

HTML

Это работает:

 

Это не работает, но это то, к чему я стремился:

  

JavaScript:

 var validator = $(".formToValidate").validate({ rules:{ "salutation":{ required:true, }, "checkBox":{ required:true, minlength:3 } } }); 

Возможно ли это сделать – существует ли способ ориентации classа вместо имени в параметрах правил? Или мне нужно добавить собственный метод?

Привет, Мэтт

Вы можете добавить правила, основанные на этом селекторе, используя .rules("add", options) , просто удалите все правила, которые хотите classифицировать из ваших параметров проверки, и после вызова $(".formToValidate").validate({... }); , сделай это:

 $(".checkBox").rules("add", { required:true, minlength:3 }); 

Другой способ, которым вы можете это сделать, – использовать addClassRules . Это специфично для classов, в то время как опция с использованием селектора и .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); }); 

Поместите это в блок сценария в конце и fragment сделает свою магию, ограничив количество флажков, отмеченных максимум тремя (или любым номером, который вы указали).

Здесь я даже дам вам тестовую страницу (вставьте ее в файл и попробуйте):

 < !DOCTYPE html>            

Поскольку для меня некоторые элементы создаются при загрузке страницы, а некоторые динамически добавляются пользователем; Я использовал это, чтобы убедиться, что все осталось СУХОЙ.

На submit найдите все с classом x, удалите class x, добавьте правило x.

 $('#form').on('submit', function(e) { $('.alphanumeric_dash').each(function() { var $this = $(this); $this.removeClass('alphanumeric_dash'); $(this).rules('add', { alphanumeric_dash: true }); }); }); 

Если вы хотите добавить пользовательский метод, вы можете это сделать

(в этом случае выбран хотя бы один флажок)

  

в 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--; } }