Проверка 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  }  
   }   
});

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

Ура, Мэтт

Источник

10 ответов

Решение

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

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});
Источник

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

Перед звонком

$(form).validate()

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

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

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

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

Источник

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

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

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

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

Источник

Вот решение с использованием 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);
});

Поместите это в блок скрипта в конце <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>
Источник

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

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

<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--;
    }
}
Источник

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

При отправке найдите все с классом 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
        });
    });
});
Источник

Если вы хотите потребовать именованное поле, если оно имеет определенный класс, я предпочитаю сделать это следующим образом:

HTML

      <form id="myForm">
    <input type="text" name="requiredField[]" class="requiredField">
    <input type="text" name="requiredField[]">
</form>

jQuery

      $("#myForm").validate({
    rules: {
        "requiredField[]": {
            required: function(element) {
                return $(element).hasClass("requiredField");
            },
            normalizer: function(value) {
                return $.trim(value);
            }
        }
     }
 });

Таким образом, вы можете ограничить его именованными полями одной формы, избегая взаимодействия с другими формами, и он поддерживает изменения классов в полях динамически или после загрузки DOM. В этом примере первое поле будет обязательным, а второе — нет.

Источник

Источник

Если вам нужно настроить правила класса multipile, вы можете сделать это следующим образом:

      jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

источник: https://jqueryvalidation.org/jQuery.validator.addClassRules/

Отказ от ответственности: да, я знаю, что сейчас 2021 год, и вы не должны использовать jQuery, но иногда нам приходится. Эта информация была очень полезна для меня, поэтому я надеюсь помочь какому-нибудь случайному незнакомцу, которому нужно где-то поддерживать какую-то устаревшую систему.

Источник
Другие вопросы по тегам