This is a migrated thread and some comments may be shown as answers.

Disable Autocorrect

2 Answers 260 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Austin
Top achievements
Rank 1
Austin asked on 04 May 2020, 06:20 PM

Hey,

I know there are ways to automatically validate with a kendo validator on a form. However, when I set a min and max value on a Numeric Text Box, after leaving the text box focus, it automatically corrects the value to said range, so the validation always passes. I may be missing it, but I don't see an option with the Razor helper to disable the autocorrect. Is this an option in the .NetCore version or do I need to override this somehow in javascript? I'd like to avoid that if possible as there are numerous (34 to be exact) numeric text boxes that need similar validation. Below is a sample numeric text box.

@(Html.Kendo().NumericTextBoxFor(x=>x.PlanDefault.EmployerMatchPercentMax).Spinners(false).Value(Model.PlanDefault.EmployerMatchPercentMax ?? 0).Min(0).Max(100).HtmlAttributes(new { @class = "form-control" }))

2 Answers, 1 is accepted

Sort by
0
Austin
Top achievements
Rank 1
answered on 04 May 2020, 08:15 PM

So after a little working around with this... I've figured out a workaround that works for me. I'm posting it here in case anyone else finds it useful.

Instead of using the built in helper methods .Max() and .Min(), I manually set the html attributes for min and max and build out the validator to handle the min and max values. Code is below, I've merged it to save space.

@(Html.Kendo().NumericTextBoxFor(x=>x.PlanDefault.EmployerMatchPercentMax).Spinners(false).Value(Model.PlanDefault.EmployerMatchPercentMax).HtmlAttributes(new { @class = "form-control", data_min = "0", data_max = "100" }))
 
var validator = $("#planDefaultForm").kendoValidator({
        rules: {
              range: function(input) {
                var min = parseFloat($(input).data("min"), 10);
                var max = parseFloat($(input).data("max"), 10);
                var value = parseFloat($(input).val(), 10);
                if (isNaN(min) || isNaN(max) || isNaN(value)) {
                  return true;
                }
                return min <= value && value <= max;
              }
            },
            messages: {
              range: function(input) {
                var min = parseFloat($(input).data("min"), 10);
                var max = parseFloat($(input).data("max"), 10);
 
                return kendo.format("Value should be between {0} and {1}!", min, max);
              }
            }
    }).data("kendoValidator");
0
Anton Mironov
Telerik team
answered on 07 May 2020, 02:29 PM

Hello Austin,

The NumericTextBox automatically applies validation and resets the value to min/max depending on the user's input. If you would like to show a validation message and disable the reset of the values, remove the Min and Max options, and use the Kendo UI Validator. The approach that you have undertaken is the recommended one.

Thank you for sharing the relevant code snippets with our community!

 

Greetings,
Anton Mironov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
NumericTextBox
Asked by
Austin
Top achievements
Rank 1
Answers by
Austin
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or