Want to display error message if value increases max value in kendo numeric textbox

Question

I have a kendo numeric textbox. I have set the Min value to that as 1 and Max value as 31.If I enter a value greater than 31 I want to display an error message that "value must be between 1 and 31".If You enter greater value the widget will round it to the max value. So if You enter a value of 50 with the keyboard and lose focus from the input or save the form, the value will be rounded to the max value of 31.

I want when You enter a greater value in the widget text box an error message to be displayed. Here is my code:

        @(Html.Kendo().NumericTextBox<int>()
        .Name("month_day_1")
        .Format("#")
        .Min(1)
        .Max(31)
        .Events(evnt => evnt.Change("Change"))

Can anyone please tell me how to Implement that.I tried to apply the condition on change event of kendo numeric textbox.But I got the error as change is not defined on console.

Here is my javascript function:

    function Change(e) {
    debugger;
    var numerictextbox = $("#month_day_1").data("kendoNumericTextBox");
    var value = numerictextbox.value();

    if (value > 31) {
        alert("Month Day value must be between 1 and 31");
        return false;
    }
} 
      )

Insert a bigger max value or none at all and check the value yourself. — Mouser, Jan 01 '15 at 09:34
Your code already checks for values larger than 31. Omit the max value and you'll be fine. — Mouser, Jan 01 '15 at 10:07
@Mouser ..It did'nt work..My numeric textbox is inside a kendo grid..Is it because of this reason Change event is not firing???? — Navya Rao, Jan 01 '15 at 10:25

score 0 · Answer 1 · answered Jan 01 '15 at 16:49

This should do exactly what you need:

    @(Html.Kendo().NumericTextBox<int>()
    .Name("month_day_1")
    .Format("#")
    .Min(1)
    .Events(e => e.Change("ChangeInput"));

function ChangeInput(e) {
    var value = this.value;
    //This should work too
    //Using jQuery --> to use, delete value = this.value and uncomment the line below
    //var value = $("#month_day_1").val();

    if (value > 31) {
        alert("Month Day value must be between 1 and 31");
        return false;
    }
}

Since you are in a event called by the input itself, the keyword this refers to the input. Retrieving the value with this.value should work. Make sure your JavaScript is on the page and loaded.

Want to display error message if value increases max value in kendo numeric textbox

1 Answers1