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

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

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

источник

2010-05-06 Matt

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

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

источник

2010-05-06 11:07:29

Я пробовал это, но он только добавляет правило для первого флажка с классом checkBox. Нужно ли что-то вроде перечислителя .each()? – thomaspaulb

Это работает: http://stackoverflow.com/questions/5748346/jquery-validate-plugin-cant-validate-classes – thomaspaulb

@littlegreen, .each (function() {$ (this) .rules ("add", someOption);}) может работать – Allen

Вот мое решение (не требует 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>

источник

2010-05-06 10:30:23

Привет, это блестяще - спасибо за ваш ответ. Delan, однако, остальная часть формы (которую я еще не показывал) также использует jQuery, поэтому я бы предпочел, чтобы я мог использовать jQuery в этом примере, потому что все это должно быть подтверждено одновременно. – Matt

Вот решение с помощью JQuery:

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

источник

2011-08-10 12:46:48

Вы проверили этот код? Он задает все флажки с классом «checkbox». –

проголосовали за использование каждой функции, в которой addClassRules работал бы отлично. –

требуется: функция (elem) { return ($ ('input: checkbox.checkBox: checked'). Length == 0); \t \t \t}, Не может его улучшить. – Jaikrat

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

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

$(form).validate()

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

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

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

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

источник

2012-11-21 13:36:52

+1 для 'addClassRules' Почему я не знал об этом раньше. –

Это лучшее решение, хотя я не знаю, почему вы не можете передать его через настройки –

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

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

источник

2012-12-20 18:23:31

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

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

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

источник

2013-04-19 08:08:17 Barno

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

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

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

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

источник

2014-08-16 09:32:33

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

ответ

Смежные вопросы