Проверка jquery против динамических полей
Я использую плагин проверки jQuery и хочу проверить многие динамически добавленные текстовые поля, чтобы их суммирование проверялось на отдельное полное поле.
В прошлом я написал свои собственные методы проверки, но только простые, которые используют основную структуру регулярных выражений, которую легко воспроизвести из файла дополнительных методов .js.
В частности, сайт jQuery дает простой пример использования функции addMethod(), чтобы сделать что-то очень похожее:
jQuery.validator.addMethod("math", function(value, element, params) {
return this.optional(element) || value == params[0] + params[1];
}, jQuery.format("Please enter the correct value for {0} + {1}"));
Реализация параметра params более или менее плохо документирована. Я смог найти, как передать содержимое в params в qaru.site/info/212972/.... Однако массив, переданный в params в этом примере, является статическим. Массив, который мне нужно передать в params, растет и сжимается на основе динамически добавленных строк, добавленных в "runtime"...
Я загрузил полностью отключенную версию на jsfiddle для вашего просмотра.
Обратите внимание, что в коде есть встроенные комментарии, в которых у меня есть вопросы, а также я удалил функциональность Remove, поскольку он только добавляет беспорядок и не помогает проиллюстрировать эту точку.
Итак, как я могу использовать библиотеку проверки jQuery, чтобы гарантировать добавление динамически добавленных полей к определенной сумме? Заранее благодарю вас!
Ответы
Ответ 1
Вот моя версия вашего валидатора.
http://jsfiddle.net/linkabi9/shBxv/
Вы заметите, что вместо статических чисел для параметров я передаю селектор. Один элемент массива является селектором полей вклада. Я дал каждому существующему и новому вкладу вклад в класс, "setamount1", вы можете использовать любой класс, который вы хотите. Поле, в которое вы установите этот валидатор, будет полем "Общая сумма".
Я также добавил живое "изменение" в поля вклада. Это приведет к проверке при каждом изменении. Я должен предупредить вас, это проверяет всю форму, а не только депозит и полные поля.
Теперь вы можете повторно использовать этот тип валидатора несколько раз в той же форме/странице!
Я пошел дальше и поставлю код валидатора ниже. Кроме того, пример инициализации валидатора.
jQuery.validator.addMethod("depositsSum", function(value, element, params)
{
var amnts = 0;
$(params[0]).each(function() {
amnts += parseFloat($(this).val());
});
return this.optional(element) || amnts == parseFloat(value);
}, jQuery.format("Individual deposits must add up to the total!"));
$("#depositForm").validate({
rules: {
fullAmount: {
depositsSum: [".amountset1"]
}
}
});
Ответ 2
Итак, сначала вам нужно вычислить общее количество всех динамических полей. Один из способов сделать это - пометить все такие поля классом. Скажем, мы называем их "суммой". Затем вы можете рассчитать их сумму с помощью этого
var total = 0;
$('#depositForm input.amount').each(function() {
total += Number($(this).val());
});
Теперь вам нужно передать это общее значение методу проверки. Поскольку у javascript есть замыкания, вы можете сделать следующее
$("#depositForm").validate({
rules: {
fullAmount: {
depositsSum: function() {
var total = 0;
$('input.amount').each(function() {
total += Number($(this).val());
});
return total;
}
}
}
});
Эта функция будет выполняться каждый раз, и ее результатом будет ваше значение параметра. Таким образом, функция проверки будет в конечном итоге
function(value, element, total) {
return this.optional(element) || value == total;
}
Для второй части вопроса, выполняющего проверку для динамических полей, существует два подхода. Либо введите класс маркировки проверки, либо используйте методы rule("add", ) и rule("remove", ) для ввода/удаления динамического поля.
Вот пример классового подхода:
Пусть все проверенные поля (динамические и итоговые) имеют класс "checkSum". Тогда:
$.validator.addClassRules("checkSum", {
depositsSum: function() {
var total = 0;
$('input.amount').each(function() {
total += Number($(this).val());
});
return total;
}
});
$("#depositForm").validate();
Здесь JSFiddle всего.
Конечно, вы заметите, что это не работает, как вы могли подумать. Для вашего приложения вид проверки, который вы ищете, - это полная проверка формы, вызванная изменением поля, а не проверка поля. Поиграйте с ним немного и посмотрите, о чем я говорю.
Ответ 3
Попробуйте использовать это в ur файле html-кода...
<input id="check" name="check" type="text" class="required math">
Как только u динамически создаст тег ввода, как указано выше, он будет проверен по методу ur add. Попробуйте.
Ответ 4
Это включает в себя добавление и удаление строк с текущей ценой обновления. [скачать]
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript">
$(document).ready(
function()
{
$('.add-row').click(
function()
{
addRow();
return false;
}
);
addRow();
}
);
function addRow()
{
var newRow = '<li class="deposit"><input class="price"> <a href="#" class="remove">Remove</a></li>';
$('.deposits').append(newRow);
$('.deposit:last .price').select();
setListeners();
}
function removeRow(val)
{
$(val).parents('.deposit').remove();
sumDeposits();
}
function setListeners()
{
$('.price').each(
function()
{
$(this).keyup(
function()
{
sumDeposits();
}
);
}
);
$('.remove').each(
function()
{
$(this).click(
function()
{
removeRow(this);
}
);
}
);
}
function sumDeposits()
{
var total = 0;
$('.price').each(
function()
{
total += Number( $(this).val() );
}
);
$('.total').html(total);
}
</script>
</head>
<body>
<h3>Total is <span class="total">N/A</span></h3>
<p><a href="#" class="add-row">Add</a></p>
<ul class="deposits"></ul>
</body>
</html>
