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

Я хотел бы проверить форму с помощью плагина jQuery validate, но я не могу использовать значение " имя " в 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  }  
   }   
});

можно ли это сделать - есть ли способ таргетинга на класс вместо имени в параметрах правил? Или мне нужно добавить пользовательский метод?

Ура, Мэтт

7 53
javascript html css jquery jquery-validate

7 ответов:

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

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

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

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

$(form).validate()

используйте вот так:

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

Ref: http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

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

32

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

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

этот метод не требует наличия метода validate выше этого вызова.

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

10

вот решение с помощью jQuery:

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

вот мое решение (не требует 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> и фрагмент будет делать свое волшебство, ограничивая количество флажков, отмеченных максимум до трех (или любое другое число, которое вы укажете).

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

<!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>
3

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

на 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
        });
    });
});
1

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

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

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