Custom error message with DataAnnotationsExtensions

Question

I'm trying to get Scott Kirkland's DataAnnotationsExtensions to work with my MVC4 project. But I'm having problems with the client side validation of an email address. I've added a EmailAddress annotation with a error message, but when I enter an invalid email address I do not get the custom error message, but instead I get the generic email error message "Please enter a valid RecipientEmail address.".

My class looks like this:

public class NpRequest
{
    [DisplayName("Telefonnummer som skal overdrages")]
    [Required(ErrorMessage = "Angiv telefonnummeret som skal overdrages")]
    public string PhoneNumer { get; set; }

    [DisplayName("Recipient email address")]
    [EmailAddress(ErrorMessage = "This is my custom error message")]
    [Required(ErrorMessage = "The recipient email address is required")]
    public string RecipientEmail { get; set; }
    public RecipientTypeEnum RecipientType { get; set; }
}

And my view:

---SNIPPET BEGIN---

    <div class="editor-label">
        @Html.LabelFor(model => model.PhoneNumer)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PhoneNumer)
        @Html.ValidationMessageFor(model => model.PhoneNumer)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.RecipientEmail)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.RecipientEmail)
        @Html.ValidationMessageFor(model => model.RecipientEmail)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>

---SNIPPET END---

EDIT: When I inspect the HTML it looks like this:

<input class="text-box single-line input-validation-error" data-val="true" data-val-email="This is my custom error message" data-val-required="The recipient email address is required" id="RecipientEmail" name="RecipientEmail" type="email" value="">

It seems that my custom error message is put into the data-val-email attribute. I was under the impression that the DataAnnotationExtension automatically added my custom error message to the ModelState and thereby also adding it to the field-validation-error span, which is showing the MVC validation error.

Is this assumption wrong? Should I write my own javascript, which extracts the custom error message attribute and injects it into the field-validation-error span?

Can anyone see what I'm doing wrong?

Answer 1

I ended up using a mix of System.ComponentModel.DataAnnotations and DataAnnotationsExtensions. I found out out that most of the time data annotations will also make client side validation. The only time where is no client side validation, is when I check if the phone number is the correct length.

public class NpRequest
{
    [DisplayName("Phone number")]
    [MinLengthAttribute(8, ErrorMessage = "Phone number must be 8 digits")]
    [MaxLengthAttribute(8, ErrorMessage = "Phone number must be 8 digits")]
    [DigitsAttribute(ErrorMessage = "Phone number must be 8 digits")]
    [Required(ErrorMessage = "Phone number is required")]
    public string PhoneNumber { get; set; }

    [DisplayName("Modtagers email adresse")]
    [EmailAddressAttribute(ErrorMessage = "Invalid email")]
    [Required(ErrorMessage = "Email is required")]
    public string RecipientEmail { get; set; }
    public RecipientTypeEnum RecipientType { get; set; }
}