Dynamically change min value in jquery validate

m2ew
m2ew used Ask the Experts™
on
I'm trying to switch the min: value in jquery validate depending on what value is in a select box
I'm using the variable minqty = 1; The alert shows me that the value for minqty is changed to 25.

However, in $("#addtocartForm").validate function, minqty is still set to 1; not triggering the validation

var minqty = 1;
 $('.row select').change(function(minqty){
  minqty = 25;
 
});
$('input.quantity').change(function(){
		if ($(this).val() < minqty){
			$("#addtocartForm").validate();
		}
		alert($(this).val() + " minqty: "+minqty);
});

$("#addtocartForm").validate({
			rules: {
				quantity: {
					required: true,
					digits: true,
					min: minqty
				}
			},
			messages: {
				quantity: minqty+"<?php echo $quantityerrstr?>"
			}
		});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
PANkaj KumarSoftware Developer

Commented:
Update validation rule for particular control :

$('.row select').change(function(minqty){
  minqty = 25;
   //get control
   var control= $('input.quantity');

   // Update control validation rules
   control.rules("add", {required: true, digits: true, min: minqty});

});

Open in new window

Author

Commented:
Hi PANkaj,
I've added the .rules function now. However, for me to generate the message error, I have to set $('input.quantity') to 0.
The alert tells me minqty = 25. However, the validation error message says, "Please enter a value greater than or equal to 1". Thus, it's not even grabbing my quantitystrerror update. Either way, if the quantity  1 or greater; the message is not triggered, ignoring the new min set at 25.

var minqty = 1;
var quantitystrerror; 
 $('.row select').change(function(){
  minqty = 25;
 
});
$('input.quantity').change(function(){
		$(".quantity").rules("add", {required: true, digits: true, min: minqty});
		if ($(this).val() < minqty){
			$("#addtocartForm").validate();
		}
		quantitystrerror = "A minimum of "+minqty+" is required";
		alert($(this).val() + " minqty: "+minqty);
});

$("#addtocartForm").validate({
			rules: {
				quantity: {
					required: true,
					digits: true,
					min: minqty
				}
			},
			messages: {
				quantity: quantitystrerror
			}
		});

Open in new window

Commented:
It turns out the only way to get the error message to switch was by adding a custom method to jquery validation. I reworked the tutorial here https://chinhplq.wordpress.com/2016/05/18/dynamic-error-message-in-jquery-validation/

Rather than adding rules and messages to $("#addtocartForm").validate(); the new FlagQTY method is assigned to all inputs where the class equals quantity. Thus, I don't need to define the rules, messages, or use .rules() to define the change elsewhere.

In the addMethod; the function returns as valid when the input value >= minqty. Else, I set the error message via newPara = "A minimum of "+para+" is required". If minqty == 1 , then the error message becomes newPara = "Please set a quantity";

Lastly, in addClassRules, I have to bind this method to a input class; quantity. Also, I have to call FlagQTY: function() { return minqty;} to ensure that the change in minqty's value is carried into the function. Thus, when minqty is set to 25 ( via $('.row select').change(function(){}); ), the error message output will then "A minimum of 25 is required".

var minqty = 1;
var quantitystrerror; 
 $('.row select').change(function(){
  minqty = 25;
});
 $.validator.addMethod("FlagQTY", function (value, element, para) {

              return (value >= minqty);

            },function(para, element){
                  var newPara = "A minimum of "+para+" is required"; // manipulate your value
                  if (minqty == 1){
                    newPara = "Please set a quantity";
                  } 
                  return $.validator.format("{0}", newPara);
            });
            $.validator.addClassRules({
                quantity: {
                digits: true,
                required: true,
                FlagQTY: function() { return minqty;}
                }
            });
$("#addtocartForm").validate();

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial