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

Я хотел бы проверить форму с помощью плагина 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

Ответ 1

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

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

Ответ 2

Другой способ, которым вы можете это сделать, - использовать addClassRules. Это специфично для классов, в то время как опция с использованием селектора и .rules является более общим способом.

Перед вызовом

$(form).validate()

Используйте это:

jQuery.validator.addClassRules('myClassName', {
        required: true /*,
        other rules */
    });

Ссылка: http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

Я предпочитаю этот синтаксис для такого случая.

Ответ 3

Я знаю, что это старый вопрос. Но я тоже нуждался в одном и том же, и я получил этот вопрос из stackoverflow + другого ответа из этого блога. Ответ, который был в блоге, был более прямым, поскольку он фокусируется специально для такого рода проверки. Вот как это сделать.

$.validator.addClassRules("price", {
     required: true,
     minlength: 2
});

Этот метод не требует, чтобы у вас был метод проверки выше этого вызова.

Надеюсь, это поможет кому-то и в будущем. Источник здесь.

Ответ 4

Здесь решение с использованием jQuery:

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });

Ответ 5

Здесь мое решение (не требует 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>

Ответ 6

Так как для меня некоторые элементы создаются при загрузке страницы, а некоторые динамически добавляются пользователем; Я использовал это, чтобы убедиться, что все осталось сухим.

В 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
        });
    });
});

Ответ 7

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

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

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