CODEWITHSUNDEEP
jqueryjquery-validate
bpruitt-goddard
bpruitt-goddard

Reputation: 3324

Jquery Validator Dynamic Parameters

Is there a way to pass dynamic parameters into a custom jquery validate method? Specifically, I was looking for a way to compare 2 controls and would like to pass one to the other's validate method for comparison.

Here is what I currently have:

 //Add method
 $.validator.addMethod("lowerInt", function(value, element, params) {
            alert('inside method');
            if (isNaN(parseInt(params)))
                return true;
            else
                return parseInt(value) < parseInt(params);
        }, $.validator.format("Please enter a number smaller than {0}")); 

 //Set validation
 $("#form1").validate({
     rules: {
        lowInt: {
            required: true,
            integer: true,
            lowerInt: 8 //I would like to pass a dynamic value here
        }
     }
 });

If I run it as above, it works as it should. If I change the 8 passed in to lowerInt to $('#highInt').val(), it seems to set the value for the lowerInt function only once and never update it. I realize that I can get the value inside of the method by calling $('#highInt').val(), but I would like to pass the value instead if at all possible.

Upvotes: 14

Views: 15896

Answers (2)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Make the parameter a function.

$("#form1").validate({
     rules: {
        lowInt: {
            required: true,
            integer: true,
            lowerInt: function(){ return $('#highInt').val(); }
        }
     }
 });

Then you call the function in the validate method something like

var high = params[0]();

Upvotes: 6

Nick Craver
Nick Craver

Reputation: 630349

I would pass in a selector, like this:

//Add method
$.validator.addMethod("lowerInt", function(value, element, params) {
  var hi = typeof params[0] == "string" ? 
           parseInt($(params[0]).val(), 10) :
           params[0];
  if (isNaN(hi))
    return true;
  else
    return parseInt(value) < hi;
}, $.validator.format("Please enter a number smaller than {0}")); 

//Set validation
$("#form1").validate({
  rules: {
    lowInt: {
        required: true,
        integer: true,
        lowerInt: '#highInt'
    }
  }
});

This version will take either a number or a selector, making it as flexible as possible.

Upvotes: 16

Related Questions