All Components

Range Validation

The NumericTextBox allows you to restrict its value to a specific range.

To implement the range-validation feature, use either of the following approaches:

  • Restrict the input value between a specific min and max range. The typed value gets modified to fit the range on blur.
<div id="vueapp" class="vue-app">
    <kendo-numerictextbox :min="0"
                            :max="10">
    </kendo-numerictextbox>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp"
})
  • Use a custom Kendo UI Validator rule to restrict the input value. The invalid value keeps unchanged and the user is notified for the incorrect input over an error message.

For more information, refer to the article on the custom validation rules of the Validator.

For a sample implementation of the range validation functionality, refer to this online demo.

In this article