We have an ASP.NET MVC application using jQuery Unobtrusive Validation and NumericTextBox. We are seeing some odd behavior with respect to the automatic field highlighting that the validation provides.
The NumericTextBox generates a <span> with two <input type="text"> elements inside. One appears to be the formatted/read-only version of the input; the other appears to be the actual input box the user types in.
jQuery Unobtrusive Validation assigns the CSS class "input-validation-error" to any input field with a client-side validation error. The problem is, it only assigns it to the box that the user types into. So while the field has focus, you see a nice border on the field as expected (see attachment: cursor_in_field.png). However, when the user moves to a different field, while the validation message stays present, the field border is lost because the input field is technically hidden (see attachment: cursor_out_of_field.png).
Further, if client-side validation passes but some server-side validation fails, you get a "double border" around the field - because the <span> element gets the CSS class "input-validation-error" AND the input elements (both) get the class (see attachment: server_val_fail.png).
If you put the cursor into the field and take it back out again, the client-side validation fires and removes the "input-validation-error" class from the two input elements... but the span element doesn't get cleaned up (see attachment: server_val_fail_after_click.png).
I have the kendo.aspnetmvc.js and the kendo.web.js being included in my project. The behavior of the controls otherwise seems to work very well. Am I missing something?
The NumericTextBox generates a <span> with two <input type="text"> elements inside. One appears to be the formatted/read-only version of the input; the other appears to be the actual input box the user types in.
jQuery Unobtrusive Validation assigns the CSS class "input-validation-error" to any input field with a client-side validation error. The problem is, it only assigns it to the box that the user types into. So while the field has focus, you see a nice border on the field as expected (see attachment: cursor_in_field.png). However, when the user moves to a different field, while the validation message stays present, the field border is lost because the input field is technically hidden (see attachment: cursor_out_of_field.png).
Further, if client-side validation passes but some server-side validation fails, you get a "double border" around the field - because the <span> element gets the CSS class "input-validation-error" AND the input elements (both) get the class (see attachment: server_val_fail.png).
If you put the cursor into the field and take it back out again, the client-side validation fires and removes the "input-validation-error" class from the two input elements... but the span element doesn't get cleaned up (see attachment: server_val_fail_after_click.png).
I have the kendo.aspnetmvc.js and the kendo.web.js being included in my project. The behavior of the controls otherwise seems to work very well. Am I missing something?
1 Answer, 1 is accepted
0
Hello Travis,
Georgi Krustev
Telerik
As NumericTextBox widget contains two input elements, only the initial will be validated and styled by the jQuery validate. You can overcome this using the suggested approach in this project. I will suggest you continue our discussion in the support thread opened on the same subject in order to avoid any duplications.
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!