How can I have a custom ValidationAttribute rendered as a 'data-val-xx' attribute on the client-side?

Question

Given a ViewModel that looks like this:

public class Login {
    [Required]
    public string Username { get; set; }

    [Required, CustomValidator]
    public string Password { get; set; }
}

And a View like this (Razor syntax here):

@Html.TextBoxFor(f => f.Password)

I am getting the following markup:

<input type="text"
       value="" 
       data-val-required="This field is required." />

However I would like it to also include a 'data-' attribute for my custom validator.

I want something like this:

<input type="text" 
       value="" 
       data-val-required="This field is required."
       data-val-customvalidator="XYZ" />

How can I achieve this with ASP.NET MVC 3.0?

E.g. Do I need to put some special attribute on my custom validator? Or register it somewhere?

Answer 1

Well, MSDN saved me (as it often does).

http://msdn.microsoft.com/en-us/library/ff398048.aspx

So first I have to create an adapter for my validation attribute:

public class CustomAttributeAdapter : DataAnnotationsModelValidator<EmailAttribute>
{
    public CustomAttributeAdapter(
        ModelMetadata metadata,
        ControllerContext context,
        CustomAttribute attribute) :
        base(metadata, context, attribute)
    {
    }

    public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
    {
        ModelClientValidationRule rule = new ModelClientValidationRule()
        {
            ErrorMessage = ErrorMessage,
            ValidationType = "custom"
        };
        return new ModelClientValidationRule[] { rule };
    }
}

(The 'ValidationType' setting must be lower-case for this to work, as this is the post-fix which will be used as an HTML5 attribute - 'data-val-custom'.)

Then all I need to do is register it on Application_Start.

DataAnnotationsModelValidatorProvider.RegisterAdapter(
    typeof(EmailAttribute),
    typeof(EmailAttributeAdapter));

Looking forward to a lot of fun with HTML5 validation. :)