Kendo Knockout: сообщение подтверждения валидации NumberericTextBox при введении больше максимального значения

Question

Я использую библиотеку kendo-knockout. У меня есть виджет с числовым текстовым полем с максимальным значением 20. Если вы введете большее значение, виджет будет округлять его до максимального значения. Поэтому, если вы вводите значение 50 с клавиатурой и теряете фокус с входа или сохраняете форму, значение будет округлено до максимального значения 20.

Я хочу, когда вы вводите большее значение в текст виджетов в поле появится сообщение об ошибке. Для этого в виду, я изменил конфигурацию из:

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

в

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

Но конечный результат тот же. Значение округлено. Если я удалю виджет:

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

Я получаю желаемое поведение. Можно ли это сделать с помощью виджета с числовым текстовым полем?

Вот jsfiddle:

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

Для пояснения я добавил желаемое поведение без виджета. Спасибо

Answer 1

Вы можете связать событие с изменением, но Kendo не отправляет недействительное значение, поэтому вам нужно сделать дополнительный хакер, чтобы сохранить введенное значение (например, событие bind blur), а затем сравнить сохраненное значение и лимиты.

здесь 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 модель

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()); 

Вы также можете сохранить значение в свойстве этого вместо данным JQuery.

вот пример jsfiddle http://jsfiddle.net/Z8yq5/