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

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

55 голосов
/ 06 мая 2010

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

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

Ура, Matt

Ответы [ 7 ]

81 голосов
/ 06 мая 2010

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

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});
33 голосов
/ 21 ноября 2012

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

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

$(form).validate()

Используйте как это:: http://docs.jquery.com/Plugins/Validation/Validator/addClassRules#namerules

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

11 голосов
/ 16 августа 2014

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

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

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

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

6 голосов
/ 10 августа 2011

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

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });
2 голосов
/ 06 мая 2010

Вот мое решение (не требует 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>
1 голос
/ 19 апреля 2013

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

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

<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 голос
/ 20 декабря 2012

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

При отправке найти все с классом 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
        });
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...