jQuery Validate Unobtrusive is not working for TextArea

Question

I'm using "jQuery Validate Unobtrusive" with ASP.NET MVC3 Razor.

I have a page with a "Comments" form, like this:

Model

public class CommentModel
{

    [Required]
    public string Name { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [DataType(DataType.Url)]
    [Display(Name = "Website URL")]
    public string WebsiteUrl { get; set; }

    [Required]
    public string Message { get; set; }

}

View

    @using (Html.BeginForm("AddComment", "Blog", new { @articleID = article.ID }))
    {
        <p>
            @Html.LabelFor(m => m.commentModel.Name)
            @Html.TextBoxFor(m => m.commentModel.Name)
            @Html.ValidationMessageFor(m => m.commentModel.Name)
        </p>
        <p>
            @Html.LabelFor(m => m.commentModel.Email)
            @Html.TextBoxFor(m => m.commentModel.Email)
            @Html.ValidationMessageFor(m => m.commentModel.Email)
        </p>
        <p>
            @Html.LabelFor(m => m.commentModel.WebsiteUrl)
            @Html.TextBoxFor(m => m.commentModel.WebsiteUrl)
            @Html.ValidationMessageFor(m => m.commentModel.WebsiteUrl)
        </p>
        <p>
            @Html.LabelFor(m => m.commentModel.Message)
            @Html.TextAreaFor(m => m.commentModel.Message)
            @Html.ValidationMessageFor(m => m.commentModel.Message)
        </p>
        <p>
            <input type="submit" value="Submit Comment" />
        </p>
    }

However, when the form is submitted, only Name and Email return a validation error, when Message should be too:

If I change Message from TextAreaFor to TextBoxFor, then the validation works correctly.

Why is this, and how can I get the validation to work on my text box?

---

It might also be worth noting I've not had to write any specific jQuery for this form. I followed a tutorial which explained this isn't required as its all handled by MVC3.

Answer 1

Decorate the corresponding model property with [DataType(DataType.MultilineText)] data annotation and use Html.EditorFor Helper method.

[Required]
[DataType(DataType.MultilineText)]
public string Message { get; set; }

Now use @Html.EditorFor Helper method

@Html.EditorFor(m => m.RoleDescription)

Answer 2

It's a bug with TextAreaFor when the model is nested. Put the contents of your CommentModel in the "root" model so to speak and everything works great. Or, change TextAreaFor to TextBoxFor and it works great!

On an unrelated topic, I feel validated that I am not the only one to try and nest my comment model like you are. This should really be fixed!

Edit: Here is the bug ticket for the issue:

http://aspnet.codeplex.com/workitem/8576

Edit2: Shyju's workaround of using EditorFor works! Interestingly, it also adds some additional class names to the output of the , so be careful they don't conflict with your CSS.