简体   繁体   中英

Jquery Validate Depends changing rule value of minimum

Javascript

dollars: {
                required: true,
                number: true,
                min:{ 
                    depends: function(element) {
                        if($('#method option:selected').text() == "Cash Deposit"){
                            return 20;
                        } else if($('#method option:selected').text() == "Wire Transfer"){
                            return 200;
                        }
                        else{
                            return 20;
                        }
                    }
                }
                ,
                max: maximumDA,
                unique: true
            },

HTML

<select class="required" id="method" name="method" required>
        <option value="deposit">Cash Deposit</option>
        <option value="wire">Wire Transfer</option>
        <option value="cbymail">Cash by Mail</option>
</select>

I'm trying to make the minimum dollar amount change when a different option is selected. The depends does not work as is. I have a feeling I will have to create my own rule to get this to work, I am just curious to know if their is a way for depends to function correctly like this.

EDIT:

My Solution:

In order for the min amount to be dynamically changed, I don't think you can use a depends function to change a value of the rule, only the on off.

I simply removed and added the rules to make it work as I needed.

$('#method').change(function(){
    if($('#method option:selected').text() == "Cash Deposit"){
         $('#dollars').rules("remove","min");
         $('#dollars').rules("add",{min:20});
    }
    else if($('#method option:selected').text() == "Wire Transfer"){
         $('#dollars').rules("remove","min");
         $('#dollars').rules("add",{min:200});
    }
    else{
         $('#dollars').rules("remove","min");
         $('#dollars').rules("add",{min:20});
    }
});

first you should do when (events)change will happen in select tag , return that value.then only function will work.

if function inside of dollars.min it code does't know when it will be call.

 var minAmount;
    $('#method').change(function(){
        if($('#method option:selected').text() == "Cash Deposit")         {  minAmount=20;   }
        else if($('#method option:selected').text() == "Wire Transfer")   {  minAmount=200;  }
        else                                                              {  minAmount=20;   }
        alert(minAmount);
    });

now assign minAmount value to dollars :{ min : minAmount }

      dollars: {
            required: true,
            number: true,
            min:{ depends: minAmount },
            max: maximumDA,
            unique: true
        },

This worked for me:

function returnValue() {
    var theValue;
    if ($('#method option:selected').val() == "deposit") {
        theValue = 20;
    } else if ($('#method option:selected').val() == "wire") {
        theValue = 200;
    } else {
        theValue = 20;
    }
    var variable = {
        dollars: {
            required: true,
            number: true,
            min: {
                depends: theValue
            },
            max: maximumDA,
            unique: true
        }
    };
    return variable;
}
$('#method').change(function () {
    returnValue();
});
returnValue();

Note that I made some changes to your dollars property for testing purposes.


ALTERNATIVE:

You can use:

function returnValue() {
    if ($('#method option:selected').val() == "deposit") {
        return 20;
    } else if ($('#method option:selected').val() == "wire") {
        return 200;
    } else {
        return 20;
    }
}

... and then call the function via:

min: {
        depends: returnValue()
     },

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM