Question

I’m using jQuery’s validation plugin and looking to validate many dynamically added text fields such that their summation is checked against a separate total field.

I’ve written my own validation methods in the past, but only simple ones that take on the basic regex structure that is easy to reproduce from the additional-methods.js file.

Specifically, the jQuery website gives a simple example of using the addMethod() function to do something quite similar:

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

The implementation of the params parameter is more-or-less poorly documented. I was able to find how to pass content into params in a seperate stackoverflow thread. However, the array passed into params in that example is static. The array I need to pass to params grows and shrinks based on dynamically added rows added at ‘runtime’…

I’ve uploaded a completely stripped down version onto jsfiddle for your viewing.
Note that the code has some comments embedded where I have questions, and also, I removed the Remove functionality, as it only adds clutter and doesn’t help illustrate the point.

So how can I use the jQuery validation library to ensure that dynamically added fields add to a specific total? Thank you in advance!

Answer 1

Here is my version of your validator.

http://jsfiddle.net/linkabi9/shBxv/

You’ll notice that instead of static numbers for parameters, I pass a selector. The one element in the array is a selector for the deposit fields. I gave every existing and new deposit input a class, “setamount1”, you can use any class you want. The field you set this validator to will be the “Total Amount” field.

I also added a live “change” event to the deposit fields. This will run the validation on every change. I have to warn you, this runs validation on the whole form not just the deposit & total fields.

Now you can reuse this validator type multiple times in the same form/page!

I went ahead and put the validator code below. Plus, an example of the validator initialization.

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"]
        }
    }
});