ASP.NET MVC3 JQuery Validate Plugin 自定义错误放置答案

【问题标题】：ASP.NET MVC3 JQuery Validate Plugin custom error PlacementASP.NET MVC3 JQuery Validate Plugin 自定义错误放置
【发布时间】：2011-02-16 17:16:15
【问题描述】：

我正在尝试使用 Microsoft 提供的不显眼验证来处理 ASP.NET MVC 3 项目中的 errorPlacement JQuery Validate 插件。我永远无法点击 errorPlacement 函数，我不确定我做错了什么。我在下面提供模型/视图/控制器的代码。请让我知道我做错了什么？

查看

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Project.Models.SampleModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
</head>
<body>
    <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript">

         $(document).ready(function ()
    {
        $("#form").validate(
      {
          errorPlacement: function (error, element)
          {
              alert("Code to define customer error");
          }
      })

    });
    </script>
    <% using (Html.BeginForm("Index", "Sample", FormMethod.Post, new { id = "form" }))
       { %>
    <%: Html.ValidationSummary(false) %>
    <fieldset>
        <legend>NewModel</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Name) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Age) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Age) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Address) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Address) %>
        </div>
        <br />
        <p>
            <input type="submit" id="submit" value="Submit" />
        </p>
    </fieldset>
    <% } %>
</body>
</html>

模型

public class SampleModel
    {


        [Required]
        [DataType(DataType.Text)]
        [DisplayName("Name")]
        public string Name { get; set; }

        [Required]
        [DataType(DataType.Text)]
        [DisplayName("Age")]
        public string Age { get; set; }

        [Required]
        [DataType(DataType.MultilineText)]
        [DisplayName("Address")]
        public string Address { get; set; }


    }

控制器

public class SampleController : Controller
    {
        //
        // GET: /New/

        public ActionResult Index()
        {
            return View();
        }

    }

【问题讨论】：

标签： jquery asp.net asp.net-mvc-3 validation errorplacement

【解决方案1】：

我发现一篇文章 here 解决了这个问题。

简而言之：

var valOpts = $.data($('form')[0], 'validator').settings; //we've got jQuery.validation settings woohoo!
var baseError = valOpts.errorPlacement;
valOpts.errorPlacement = function (error, input) {
    input.attr('title', error.text()); //error is the $('<span>...</span>')
    baseError(error, input); //removing this breaks form validation
};

【讨论】：

【解决方案2】：

在 MVC3 中，Microsoft 使用 jQuery 验证插件进行内置验证。用法在 jquery.validate.unobtrusive.min.js 中。在那里找到 OnError - 并改变它的逻辑。

function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);

        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
        }
        else {
            error.hide();
        }
    }

【讨论】：

【解决方案3】：

看起来您的代码在发布时可能会受到一些破坏，但我会尝试的。你的 jQuery 代码对我来说看起来不错。

您包含 jquery 和 jquery 验证器库吗？您正在 $(document).ready 中运行您的代码吗？你有一个无效的字段？只有出现错误时，您的警报才会调用。您可以通过使用无效字段点击提交来触发。

【讨论】：

【解决方案4】：

在遇到类似问题时，我找到了解决方案。这是我的解决方案。我链接到我的问题并复制下面的答案。希望这是您正在寻找的：

Integrating qTip with MVC3 and jQuery Validation (errorPlacement)

1) 首先，找到微软提供的脚本jquery.validate.unobtrusive.js。

2) 其次，在脚本中找到 function validationInfo(form) 并将 options 结构中的 errorPlacement 指令替换为 qTip 提供的指令，或任何你的选择。

3) 样式和您希望更改验证处理方式的其他选项也是如此。

4) 包括所有需要的文件。

希望这可以帮助遇到类似问题的人。

示例代码：

function validationInfo(form) {
    var $form = $(form),
        result = $form.data(data_validation);

    if (!result) {
        result = {
            options: {  // options structure passed to jQuery Validate's validate() method
                //errorClass: "input-validation-error",
                errorClass: "error",
                errorElement: "span",
                //errorPlacement: $.proxy(onError, form),
                errorPlacement: function (onError, form) {
                    var error = onError;
                    var element = form;
                    // Set positioning based on the elements position in the form
                    var elem = $(element),
                        corners = ['left center', 'right center'],
                        flipIt = elem.parents('span.right').length > 0;

                    // Check we have a valid error message
                    if (!error.is(':empty')) {
                        // Apply the tooltip only if it isn't valid
                        elem.filter(':not(.valid)').qtip({
                            overwrite: false,
                            content: error,
                            position: {
                                my: corners[flipIt ? 0 : 1],
                                at: corners[flipIt ? 1 : 0],
                                viewport: $(window)
                            },
                            show: {
                                event: false,
                                ready: true
                            },
                            hide: false,
                            style: {
                                classes: 'ui-tooltip-red' // Make it red... the classic error colour!
                            }
                        })

                        // If we have a tooltip on this element already, just update its content
                        .qtip('option', 'content.text', error);
                    }

                    // If the error is empty, remove the qTip
                    else { elem.qtip('destroy'); }
                },
                invalidHandler: $.proxy(onErrors, form),
                messages: {},
                rules: {},
                success: $.proxy(onSuccess, form)
            },
            attachValidation: function () {
                $form.validate(this.options);
            },
            validate: function () {  // a validation function that is called by unobtrusive Ajax
                $form.validate();
                return $form.valid();
            }
        };
        $form.data(data_validation, result);
    }

    return result;
}

【讨论】：

【解决方案5】：

尝试替换为jquery.unobtrusive-ajax.min.js。

它对我有用，但我不知道将来可能会发生什么错误。

【讨论】：

【解决方案6】：

在阅读了许多帖子并试图找到答案后，我无法让错误放置起作用。我在我的 MVC 4 应用程序中使用 twitter 引导程序，并希望有一种方法可以将错误类放入控制组 div 中，以便在出现错误时使其变为红色。

无法通过表单访问已初始化的 jquery 验证器对象。

事实上，我们知道我们可以在网站初始化验证时将设置传递给 jQuery 验证。但在 MVC 中，它是自动完成的（我不确定在哪里完成）

无论如何，如果我们找到这个初始化的对象，我们可以扩展设置，并通过我们自己的函数来突出显示、取消突出显示、显示错误等。

怎么做

jQuery.validator 提供了已经初始化的验证对象的实例。在该对象中，有一个名为 setDefaults 的函数。您可以使用要自定义的功能创建设置对象。下面的例子

$(function () {
        var settings = {
            highlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
            }
        }

        if (jQuery.validator) {
            jQuery.validator.setDefaults(settings);
        }
});

【讨论】：

【解决方案7】：

您的自定义代码和选项需要在 jquery.validate 之后和 jquery.validate.unobtrusive 之前加载。

【讨论】：