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?