Dynamically change validation on browser MVC

Question

I'm implementing a donation form and I have a Donation model with the field "Amount":

[Required]
[DataMember(IsRequired = true)]
[Range(36, 10000)]
public decimal Amount { get; set; }

I also have it's validation set in the view:

<div class="editor-label">
    @Html.LabelFor(model => model.Payment.Amount)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Payment.Amount)
    @Html.ValidationMessageFor(model => model.Payment.Amount)
</div>

Problem is that when the user selects a diffrent "Currency" in the webpage the minimum amount should be changed for some currencies.

What I tried to do is to change the Input attributes:

$("#Donation_Currency").change(function () {
    var curr = this.value;
    switch (curr) {
        case "USD":
            document.getElementById("Donation_Amount").setAttribute("data-val-range", "The field Amount must be between 36 and 10000.");
            document.getElementById("Donation_Amount").setAttribute("data-val-range-min", "36");
            break;
        case "ILS":
            document.getElementById("Donation_Amount").setAttribute("data-val-range", "The field Amount must be between 100 and 10000.");
            document.getElementById("Donation_Amount").setAttribute("data-val-range-min", "100");
            break;
        default:
    }
});

But even though I see that the input attributes changed I still see the old message appears.

I'm doing something wrong that's for sure but the question is:

How do I change the validation of the field according to the value set in another field?

Are you sure the message is coming from the client-side validation? It could be that the input is validated successfully on the client side, but when it hits the server, it returns back with the message because the range is still between 36 and 10000 on the server. — thispatchofsky
– thispatchofsky, Commented May 12, 2014 at 13:04
hi @srinivas.naik. It is when I look at the attributes of the input in the developer mode, more than that, I set it to a bigger value then what it was (100 instead of 36) - so the lower minimum value on the server remains. — yossico
– yossico, Commented May 12, 2014 at 13:06

Sparky · Accepted Answer · 2014-05-12 17:30:55Z

2

Quote OP:

"But even though I see that the input attributes changed I still see the old message appears."

That's because once the plugin is initialized, you cannot simply change the jQuery Validate options by changing HTML attributes (as you've learned). Plugin initialization occurs once on page load and never again.

After initialization, you must use methods provided by the plugin to make dynamic changes to rules. See the .rules('add') method which dynamically adds rule(s)… it will also over-ride a previously defined rule.

Try something more like this…

$("#Donation_Currency").change(function () {
    var curr = this.value;
    switch (curr) {
        case "USD":
            $("#Donation_Amount").rules('add', {
                range: [36,10000],
                messages: {
                    range: "The field Amount must be between 36 and 10000."
                }
            });
            break;
        case "ILS":
            $("#Donation_Amount").rules('add', {
                range: [100,10000],
                messages: {
                    range: "The field Amount must be between 100 and 10000."
                }
            });
            break;
        default:
    }
});

edited May 12, 2014 at 17:30

answered May 12, 2014 at 14:25

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yossico Over a year ago

Thanks for your response, I tried to do that but I get the error: "Uncaught TypeError: undefined is not a function" on the line with the .role(...) (I user chrome) I dont know why but the .validation() functionality also doesnt work from the developer console - do you have an idea?

yossico Over a year ago

I solved the above commented error, now It's working - Thanks!

Collectives™ on Stack Overflow

Dynamically change validation on browser MVC

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related