jQuery Validate Unobtrusive 不适用于 TextArea答案

【问题标题】：jQuery Validate Unobtrusive is not working for TextAreajQuery Validate Unobtrusive 不适用于 TextArea
【发布时间】：2012-04-24 08:54:25
【问题描述】：

我在 ASP.NET MVC3 Razor 中使用“jQuery Validate Unobtrusive”。

我有一个带有“评论”表单的页面，如下所示：

型号

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; }

}

查看

    @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>
    }

但是，提交表单时，只有Name和Email会返回验证错误，而Message应该也是这样：

如果我将Message 从TextAreaFor 更改为TextBoxFor，则验证工作正常。

为什么会这样，我怎样才能让验证在我的文本框上工作？

值得注意的是，我不必为此表单编写任何特定的 jQuery。我按照教程解释了这不是必需的，因为它全部由 MVC3 处理。

【问题讨论】：

你能包含你的控制器代码吗？另外，您是否在布局或视图中同时包含 jquery.validate 和 jquery.validate.unobtrusive？
@ron.defreitas 哪个控制器方法？ HttpPost 方法肯定不相关，因为由于客户端验证阻止了它，所以没有达到这一点？我检查了我的布局文件，包括：jquery-1.5.1.min.js、jquery.validate.min.js 和 jquery.validate.unobtrusive.js。
您能否查看表单的呈现源并确保已将 data-validation 属性添加到文本区域，就像其他字段一样？您是否尝试过单步执行表单的 POST 以查看后端是否认为框中有输入？

标签： jquery asp.net-mvc-3 validation jquery-validate textarea

【解决方案1】：

用[DataType(DataType.MultilineText)]数据注解装饰对应的模型属性，使用Html.EditorForHelper方法。

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

现在使用@Html.EditorFor Helper 方法

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

【讨论】：

【解决方案2】：

这是嵌套模型时 TextAreaFor 的错误。可以说，将您的 CommentModel 的内容放在“根”模型中，一切都很好。或者，将 TextAreaFor 更改为 TextBoxFor，效果很好！

在一个不相关的话题上，我觉得我不是唯一一个像你一样尝试嵌套我的评论模型的人。这真的应该解决！

编辑： 这是该问题的错误票：

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

编辑2： Shyju 使用 EditorFor 的解决方法有效！有趣的是，它还在的输出中添加了一些额外的类名，因此请注意它们不要与您的 CSS 冲突。

【讨论】：

【解决方案3】：

@Shyju 的答案似乎完美无缺，但我必须在 Site.css 文件中添加一些额外的内容才能使其工作：

应用@Shyju 解决方案并添加 css for textarea ：

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

现在可以完美运行了。

【讨论】：