Question

我正在尝试使用Microsoft提供的Unobtrusive验证来处理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();
        }

    }

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

Answer 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();
        }
    }

Answer 3

看起来你的代码在帖子中可能会受到一些损坏，但我会尝试。你的jQuery代码对我来说很好。

您是否包含了jquery和jquery验证程序库？您在$（document）.ready中运行代码？你有一个无效的字段？您的警报仅在出现错误时才会调用。您可以通过使用无效字段点击提交来触发。

Answer 4

虽然有类似的问题我找到了解决方案。这是我的解决方案。我链接到我的问题并复制下面的答案。希望这就是你要找的东西：

Integrating qTip with MVC3 and jQuery Validation (errorPlacement)

1）首先，找到microsoft提供的脚本 jquery.validate.unobtrusive.js 。

2）其次，在脚本上找到函数validationInfo（表单），并将选项结构中的 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;
}

Answer 5

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

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

Answer 6

阅读了很多帖子并试图找到答案后，我无法让错误放置工作。我在我的MVC 4应用程序中使用了twitter bootstrap，并想要一种方法将错误类放入control-group div中，以便在出现错误时将其变为红色。

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

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

无论如何，如果我们找到这个初始化对象，我们可以扩展设置并传递我们自己的函数来突出显示，取消高亮显示，showErrors等。

如何操作

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

Answer 7

您的自定义代码和选项需要加载AFTER jquery.validate和BEFORE jquery.validate.unobtrusive。

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

7 个答案: