How do I remove the asterisk produced by MVC3 unobtrusive validation?

Question

I've upgraded my .net MVC project to MVC3 and am now playing around with the build in client validation. I noticed that the javascript adds an asterisk * after each input field in all of my older forms. Where is this asterisk generated and how do I modify/remove it?

The asterisk appears after enabling the following keys in the web.config file

  <appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

Answer 1

I think these are the CSS styles used by the MVC framework for validation.

.input-validation-error { border: 1px solid #f00 }
.field-validation-error { color: #f00 }
.field-validation-valid { display: none }
.validation-summary-errors { font-weight: bold; color: #f00 }
.validation-summary-valid { display: none }

In your case adding this style in your css should do the trick

.field-validation-valid { display: none }

Answer 2

You can change the error message by using attributes in the elements in the view model class such as [Required(ErrorMessage = "Username is required.")]

This will display the message rather than the asterisk. I would imaging putting a blank string in there would remove the message compeltely, but I've not tried it.