MVC 3 unobtrusive javascript validation when text field has a default value

Question

So, I have a form that works well with MVC 3, DataAnnotations, and Unobtrusive javascript. However, I want to put watermarks in the input fields, so that, for example, the Name text box is filled with the Name value by default. When the user clicks on it, the value disappears, and if they leave the field without entering anything, "Name" appears again. In addition, it is implemented for me and works well.

My question is related to the [Required] attribute in the FirstName property of my view model. If the user submits the form, by default this field has a "Name" in it, so it passes the "Required" check.

What is the best way to handle this ... I am thinking of several options:

1) Put some jQuery on fire before an unobtrusive JS check that clears watermarks so that when the check fires, those fields that have default values ​​in them are empty. I am not sure if this is possible. Can you somehow introduce a function before unobtrusive JS checks?

2) Change the [Required] attribute or create a new one to accept the default value, and then compare it to see if they match. This causes several problems, since now I have the default value specified in several places: in the user interface and in the code, and this is wrong.

3) Create a new attribute "Watermark", which I decorate with a property that indicates the default value for this field. Create a new HTML helper (instead of TextBoxFor) that searches for this attribute and returns the appropriate attributes to the tag. Change or create a new [Required] attribute that looks for [Watermark] in the same field. This saves the default value in one place and supports the principles of DRY, but it seems to me that I put the UI elements in the code (the watermarks are purely visual) and it also seems like an overly complex solution for what should be simple a problem.

Any thoughts?

Answer 1

Everyone has pros / cons. I like to support this client side and use the following.

Use the HTML5 placeholder attribute , and for browsers that support it, you no longer need to do it.

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

For browsers that don’t ...

Each page has some script compatibility for browsers that do not support certain functions. In this case, it's a bit of javascript and jQuery that detect if the browser supports the placeholder attribute. If it does not set the field value for the placeholder value, sets the style and adds the appropriate focus / blur event handlers. The focus / blur event handlers set the field value accordingly.

Then, when checking your client script, make sure the field value is not equal to the placeholder value.

In your case, this would mean changing your unobtrusive JS check to check the field value is not equal to the placeholder value

Answer 2

I would probably go with No. 2, I think you could do it in such a way that you do not need to specify the default value more than once. In addition, if you want to confirm that the username has not been accepted, you can use remote verification, and then just check if this name has already been accepted or was the default name so that you can get the behavior you need.