Question

So I have a form working quite well with MVC 3, DataAnnotations and Unobtrusive javascript. However, I want to put a “watermark” on my input fields so that for example, the First Name textbox is populated with a value of “First Name” by default. When the user clicks on it, the value disappears and if they move off the field without entering anything, “First Name” appears again. Also, I have this implemented and working well.

My question has to do with the [Required] attribute on the FirstName property of my view model. If the user submits the form, by default that field has “First Name” in it so it passes the “Required” validation.

What’s the best way to deal with this…I’m thinking of a few options:

1) Inject some jQuery to fire before the unobtrusive JS validation that clears the watermarks so that when the validation fires, those fields that have default values in them are blank. I’m not sure this is possible. Can you somehow inject a function before unobtrusive JS runs its validation?

2) Modify the [Required] attribute or create a new one to accept a default value and then compare it to see if they match. This raises a few issues in that I now have my default value specified in multiple places, one in the UI and one in code and that feels wrong.

3) Create a new “Watermark” attribute that I decorate a property with that specifies the default value for that field. Create a new HTML helper (instead of TextBoxFor) that looks for this attribute and emits the appropriate attributes to the tag. Modify or create a new [Required] attribute that looks for the existence of [Watermark] on the same field. This keeps the “Default value” in one place and keeps with DRY principles, but it feels like I’m putting UI elements into code (watermarks are purely visual) and it also feels like an overly complex solution for what should be a simple issue.

Any thoughts?

Answer 1

Each has it’s pros/cons. I like to keep this client side and have used the following.

Use the HTML5 placeholder attribute and for browsers that support it you don’t have to do anymore.

<input type="text" placeholder="First name" />

For browsers that don’t…

On every page we have some compatability script for browsers that don’t support certain features. In this case it’s a little bit of JavaScript and jQuery that detects if the browser supports the placeholder attribute. If it doesn’t it sets the field value to the placeholder value, sets the styling and adds the appropriate focus/blur event handlers. The focus/blur event handlers set the field value appropriately.

Then on your client validation script check that field value doesn’t equal the placeholder value.

In your case this would mean modifying your unobtrusive JS validation to check the field value doesn’t equal the placeholder value