JQuery验证错误放置

Question

我正在尝试使用ASP.NET MVC4进行JQuery验证。我的意图是当页面出现任何错误时，应该在控件之前显示。但错误始终显示在控件的下一行（）。

以下是我的JS，cshtml文件的片段。

$(function () {
$('#Transaction1Screen1').validate({
    errorElement: "div",
    errorLabelContainer: '#errorMessages',
    errorPlacement: function (error, element) {
        error.insertBefore(element);
    }
});

$("#TextBox1").rules("add", { email: true, messages: { email: 'Verify the e-mail in TextBox1' } });

});

捆绑映射

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/Common")
@Styles.Render("~/bundles/themesCss")
@Scripts.Render("~/bundles/jqueryUI")
@Scripts.Render("~/bundles/otherControls")
@Scripts.Render("~/bundles/ClientResources")
@Scripts.Render("~/bundles/Transaction1Screen1")

HTML内容

@Html.TextBoxFor(m => m.TextBox1, new Dictionary<string, object> { { "id", "TextBox1" }, { "name", "TextBox1" }, { "Class", "txtfield controlWidth" }, { "jsValidation", "checkEMailAddr" } })
<br />
@Html.ValidationMessageFor(m => m.TextBox1)

Answer 1

尝试HTML内容

@Html.ValidationMessageFor(m => m.TextBox1)
@Html.TextBoxFor(m => m.TextBox1, new Dictionary<string, object> { { "id", "TextBox1" }, { "name", "TextBox1" }, { "Class", "txtfield controlWidth" }, { "jsValidation", "checkEMailAddr" } })

Answer 2

尝试像这样初始化验证：

$(function(){
  $("#Transaction1Screen1").validate({
    errorElement: "span",
    errorPlacement: function (error, element) {
          error.insertBefore(element);
    }
  });
});

errorElement属性意味着你用什么元素来包装你的消息。

如果使用“div”作为错误元素，则元素将被放置在新行。

希望这有用。