How can I highlight empty fields in ASP.NET MVC 2 before model binding has occurred?
- by Richard Poole
I'm trying to highlight certain form fields (let's call them important fields) when they're empty. In essence, they should behave a bit like required fields, but they should be highlighted if they are empty when the user first GETs the form, before POST & model validation has occurred. The user can also ignore the warnings and submit the form when these fields are empty (i.e. empty important fields won't cause ModelState.IsValid to be false).
Ideally it needs to work server-side (empty important fields are highlighted with warning message on GET) and client-side (highlighted if empty when losing focus).
I've thought of a few ways of doing this, but I'm hoping some bright spark can come up with a nice elegant solution...
Just use a CSS class to flag important fields
Update every view/template to render important fields with an important CSS class. Write some jQuery to highlight empty important fields when the DOM is ready and hook their blur events so highlights & warning messages can be shown/hidden as appropriate.
Pros: Quick and easy.
Cons: Unnecessary duplication of importance flags and warning messages across views & templates. Clients with JavaScript disabled will never see highlights/warnings.
Custom data annotation and client-side validator
Create classes similar to RequiredAttribute, RequiredAttributeAdapter and ModelClientValidationRequiredRule, and register the adapter with DataAnnotationsModelValidatorProvider.RegisterAdapter.
Create a client-side validator like this that responds to the blur event.
Pros: Data annotation follows DRY principle (Html.ValidationMessageFor<T> picks up field importance and warning message from attribute, no duplication).
Cons: Must call TryValidateModel from GET actions to ensure empty fields are decorated. Not technically validation (client- & server-side rules don't match) so it's at the mercy of framework changes. Clients with JavaScript disabled will never see highlights/warnings.
Clone the entire validation framework
It strikes me that I'm trying to achieve exactly the same thing as validation but with warnings rather than errors. It needs to run before model binding (and therefore validation) has occurred. Perhaps it's worth designing a similar framework with annotations like Required, RegularExpression, StringLength, etc. that somehow cause Html.TextBoxFor<T> etc. to render the warning CSS class and Html.ValidationMessageFor<T> to emit the warning message and JSON needed to enable client-side blur checks.
Pros: Sounds like something MVC 2 could do with out of the box.
Cons: Way too much effort for my current requirement!
I'm swaying towards option 1. Can anyone think of a better solution?
