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