Problem with NumericTextBox in ASP.NET MVC project when Client Validation is enabled

[Dan Lewis]

Hi,

I am experiencing a strange issue with the kenKo NumericTextBox in my ASP.NET MVC project when (and only when) client side validation is enabled.

 I have a model class with a Nullable Decimal property and decorated with the [Required] attribute so as to force the user to enter a value (0) does not mean "no value entered".

I am using the Kendo UI widgets, but not with the MVC wrappers. I have a few different sorts of widgets on the page (dropdownlist, datePicker, timePicker etc) and all seem to work OK using the standard @Html.EditorFor / @Html.TextBoxFor / @Html.ValidationMessageFor helpers, but I am seeing strange behaviour with the NumericTextBox in particular.

Firstly, the NumericTextBox does not show the client-side Validation Message when no value is entered, but I think this is due to the fact that the real input is hidden, and jQuery validation does not work with hidden inputs. That is actually fine, and I can live without client-side validation for this, but the behaviour seems to be broken even when relying on the server-side validation performed by the ASP.NET model binder.

 Specifically, if you enter all valid entries, apart from the NumericTextBox, and click submit, the page will post back to the controller and MVC detects the model error (null value in the decimal property) and returns back to the View.

Now, the validation message *is* shown because it has been enabled by the server-side rendering.

However, if I now enter a value into the NumericTextBox and click Submit, the value posted back to the controller is always 0.

Checking the RequestBody sent to the server, the first time the Input value is included in the form values body but correctly is empty. After the post-back though, on the second submission, the input name is not sent at all, and therefore the MVC model binder is defaulting to a value of zero (not sure this should be the default behaviour but that's another topic!)

In any case, once Client side validation is disabled, the behaviour works as expected, so I would have to conclude there is some further incompatibility between the NumericTextBox and jQuery validation?

I have deployed an example MVC project to Azure here: http://mvckendonumerictextbox.azurewebsites.net/

and the source is in GitHub here: https://github.com/djjlewis/MvcKendoNumericTextBox

Regards

Dan.

 

[Georgi Krustev]

Hello Dan,

With regards to the "hidden input not validate" behavior, I would suggest you check the following help topic:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/validation#using-the-jquery-validation

The second issue you are seeing is related to the "input-validation-error" CSS class added to the widget's wrapper. This is done to ensure proper styling of the widget. jQuery validate, however, is designed to hide all span elements with such CSS class, hence the widget is hidden during post. You can find more details here:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/validation#the-widgets-are-hidden-after-a-postback-when-using-the-jquery-validation

Regards,
Georgi Krustev
Telerik