NumericTextBox min value behavior

[Suresh]

When I set min value for a KendoNumericTextBox, it automatically changes to the minimum value, instead of showing error saying that need to have minimum value. How do I change the behavior.

var numericBox = $("#numeric_" + attrObj.AttributeId).data("kendoNumericTextBox");
numericBox.min(5);
numericBox.validationMessage = "Please enter value 5 and above";

So when I enter 3 for example in the above numberBox, it is supposed to give an error saying "Please enter value 5 and above". Instead the value of the box changes to 5 and no error is shown. This behavior is not acceptable. Is there anyway I can change this?

Thanks,
Suresh

[Jeff Van Dyk]

I am interested in overriding the min/max behavior as well.  We find that our users won't notice that a value is reset to max or min when they enter an invalid value.  Is there a way to allow the validation to fire instead of resetting the values?

[Georgi Krustev]

Hello,

 
You can set the min and max values to null. Thus the widget will not reset the typed value on blur.

Regards,
Georgi Krustev
the Telerik team

[Lee]

The problem with this option is that the arrows then allow the user to select invalid options and they don't start at the minimum value. For example, the values can be null or 1000 - 2000. A user clicks the up arrow and gets 1. They tab away and it is changed to 1000 when they might not want 1000. In this case they probably want null. Furthermore, to get to 1000 they would have to click up 1000 times. 

[Kyle]

Is there ANY way to get the OP's desired behavior?  Using MVC, we need to validate the min/max, and prefer to do so with the DataAnnotations.  However, as the OP stated, our users (and product management), thinks not showing a clear error to the user is unacceptable.

I attempted to hook into the change event, but the _old and _new properties match every time, and it would have been doable if those values showed the _old as [some giant number] and _new as [the max that we defaulted to].  Then I could show an error.

Please, any assistance would be appreciated.

[Alexander Popov]

Hi Kyle,

I am afraid that the described behavior is currently not supported out of the box, however similar behavior could be achieved using a Kendo UI Validator with custom rule. For example:  

<div id="example">
@(Html.Kendo().NumericTextBox()
    .Name("MyNumber")
    .HtmlAttributes(new {data_val_msg = "My Special error message." }) //used to pass a custom validation message to the validator
    .Min(5)
    .Max(10)
    .Placeholder("Enter numeric value")
)
@Html.ValidationMessage("MyNumber")
<br />
@(Html.Kendo().NumericTextBox()
    .Name("MyOtherNumber")
    .Min(5)
    .Max(10)
    .Placeholder("Enter numeric value")
)
@Html.ValidationMessage("MyOtherNumber")
</div>
<script>
    $("#example").kendoValidator({
        rules: {
            myRule: function (input) {
                if (input.is("[data-role='numerictextbox']")) {
                    var min = parseInt($(input).attr("min"));
                    var max = parseInt($(input).attr("max"));
                    var val = parseInt(input.val());
                    if (val < min || val > max) {
                        return false;
                    }
                    return true;
                }
                return true;
            }
        },
        messages: {
            myRule: function (input) {

                var min = $(input).attr("min");
                var max = $(input).attr("max");
                var msg = "Please enter number between " + min + " and " + max;
                var customMsg = $(input).attr("data-val-msg");
                if (customMsg) {
                    return customMsg;
                } else {
                    return msg;
                }
            }
        }
    });
</script>

It is possible to replace the min and max options with data attributes, thus preventing the widget from changing the value if it is out of range. Then in the custom rule you could get the min and max values through the attributes and proceed with the validation. For example:  

@(Html.Kendo().NumericTextBox()
    .Name("MyNumber")
    .HtmlAttributes(new {data_min = 5, data_max = 10, data_val_msg = "My Special error message." })
...

myRule: function (input) {
    if (input.is("[data-role='numerictextbox']")) {
        var min = parseInt($(input).attr("data-min"));
        var max = parseInt($(input).attr("data-max"));
...

Regards,
Alexander Popov
Telerik

[Jeffrey]

I received similar project requirements and solved it by simple hacking.  What I did is to replace the _adjust function to my version to add "outOfRange" event triggers when value is not between max and min. Here is the demo.

Notice: this hacking may be broken after Kendo UI upgrade.

$("#numeric").kendoNumericTextBox();
var ntb = $("#numeric").data("kendoNumericTextBox");
  //hacking, trigger event when out of range
  ntb._adjust = function(value) {
    var that = this,
    options = that.options,
    min = options.min,
    max = options.max;

    if (value === null) {
        return value;
    }
    var invVal = value, element = this.element;
    if (min !== null && value < min) {
      setTimeout(function() {
        element.trigger("outOfRange", { value:invVal, max: max, min: min });
      }, 1);
      value = min;
    } else if (max !== null && value > max) {
      setTimeout(function() {
        element.trigger("outOfRange", { value:invVal, max: max, min: min });
      }, 1);
        value = max;
    }
    return value;
};
$("#numeric").bind("outOfRange", function(e, data) {
  if (data.value > data.max)
    alert("Value " + data.value + " is greater than Max: " + data.max);
  else if (data.value < data.min)
    alert("Value " + data.value + " is less than Min: " + data.min);
});

[Lee]

I went to the demo and when I click the up arrow I get an endless loop saying 11 is out of range. The value changes between 10 and 10.0. 

[Georgi Denchev]

An alternative variation of the _adjust method override can be found in the following forum thread:

https://www.telerik.com/forums/kendo-numeric-text-box-out-of-range-changing-to-min-or-max 

[Elliot]

We use Angular validation and would like an error message as well.  Is it still not supported to raise a validation error without changing the value? 

I cant see how it is ever acceptable to just change the users input.  Telerik should really reconsider this functionality.

[Elliot]

I have created a user voice suggestion here.  If this behaviour is important to you please vote to have it changed.