ASP.NET MVC3 jQuery验证插件自定义错误展示位置

我想在ASP.NET MVC 3项目中使用Microsoft提供的Unobtrusive验证来处理errorPlacement JQuery验证插件。我永远无法击中errorPlacement函数，我不知道我做错了什么。我在下面提供了Model/View/Controller的代码。请让我知道我做错了什么？ASP.NET MVC3 jQuery验证插件自定义错误展示位置

查看

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

    }

来源

2011-02-16 New2Development

看起来像你的代码可能已经变得错位在发布一点点，但我会努力。你的jQuery代码看起来不错。

你包含了jquery和jquery验证程序库吗？您正在$（document）.ready中运行您的代码？你有一个无效的字段？只有在出现错误时才会致电您的快讯。您可以触发提交一个无效的字段。

来源

2011-02-16 17:38:57 mrtsherman

是的所有问题。 – New2Development 2011-02-16 17:54:16

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

来源

2011-03-22 19:24:49 ckaut

虽然有类似的问题，我找到了解决方案。这是我的解决方案。我链接到我的问题，并复制下面的答案。希望这是你在找什么：

Integrating qTip with MVC3 and jQuery Validation (errorPlacement)

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

2）其次，在该脚本定位函数validationInfo（形式）和替换选项结构与由qTip提供的一个或任何所选的errorPlacement指令。 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; 
}

来源

2011-07-25 15:47:19 AJC

我发现了解决问题的文章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 
};

来源

2011-11-08 13:47:46 achekh

尝试jquery.unobtrusive-ajax.min.js来代替。

它为我工作，但我不知道未来可能发生什么错误。

来源

2012-09-06 03:49:06 Lykers

阅读了很多帖子并试图找到答案后，我无法获得错误摆放位置。我在我的MVC 4应用程序中使用twitter bootstrap，并想要一种将错误类放入控件组div的方式，以便在发生错误时使其变为红色。

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

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

无论如何，如果我们找到这个初始化对象，我们可以扩展设置并传递我们自己的函数来突出显示unhighlight，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); 
     } 
});

来源

2013-01-11 12:13:07 Amila

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

来源

2015-10-22 15:55:56 NickWebman

ASP.NET MVC3 jQuery验证插件自定义错误展示位置

回答

相关问题