CODEWITHSUNDEEP
htmlknockout.jskendo-uikendonumerictextbox
Mdb
Mdb

Reputation: 8556

Kendo Knockout: NumericTextBox show validation message on inserting more than max value

I am using the kendo-knockout library. I have a numeric text box widget with a max value of 20. 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 20.

I want when You enter a greater value in the widget text box an error message to be displayed. For that in mind I changed the configuration from:

<input type="number"  
data-bind="kendoNumericTextBox: { value: price, min="1", max="20" }" />

to 

<input type="number"  min="1" max="20"
data-bind="kendoNumericTextBox: { value: price }" />

But the final result is the same. The value is rounded. If I remove the widget:

<input type="number"  min="1" max="20" />

I get the desired behavior. Can this be done using the numeric textbox widget?

Here is jsfiddle:

http://jsfiddle.net/2Qnv7/29/

For clarification I have added the desired behavior without the widget. Thanks

Upvotes: 2

Views: 1985

Answers (1)

Martin Surynek
Martin Surynek

Reputation: 658

You can bind event on change but Kendo doesn't send invalided value so you have to do some additional hacking in order to store typed value (e.g. by bind blur event) and then compare the stored value and limits.

here is HTML 

Kendo numeric text box:
<input type="number"  min="1" max="20"
data-bind="event: { blur: blur } ,kendoNumericTextBox: { value: price, change: change }" />

Regular Input:
<input type="number"  min="1" max="20" />

    <button type="submit">Submit</button>

</form>

KO javascript model

var ViewModel = function() {
   this.price = ko.observable(11);
    this.blur = function(model, event) {
        $(event.target).data({ _prevValue: event.target.value });
    }
    this.change = function() {
        var _prevValue  = $(this.element).data('_prevValue') - 0;
        if (_prevValue > this.options.max || _prevValue < this._value) {
            alert(_prevValue + ' is out of range');
        }
    }
};

ko.applyBindings(new ViewModel());

You can also store the value into property of this instead of to jQuery data.

here is the example in jsfiddle http://jsfiddle.net/Z8yq5/

Upvotes: 0

Related Questions