CODEWITHSUNDEEP
jqueryasp.net-mvc-3validationjquery-validatetextarea
Curtis
Curtis

Reputation: 103388

jQuery Validate Unobtrusive is not working for TextArea

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:

enter image description here

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.

Upvotes: 6

Views: 6411

Answers (3)

Alberto Montellano
Alberto Montellano

Reputation: 6266

The answer from @Shyju seems to work perfectly, but I had to add something additional to the Site.css file to make it work:

Apply @Shyju solution and Add the css for textarea :

textarea.input-validation-error {
    border: 1px solid #e80c4d;
}

Now it works perfectly.

Upvotes: 0

Shyju
Shyju

Reputation: 218852

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)

Upvotes: 12

Roger
Roger

Reputation: 1746

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.

Upvotes: 1

Related Questions