将qTip与MVC3和jQueryvalidation集成（errorPlacement）

我正在开发一个MVC3的proyect，我正在尝试将qTip2与jQueryvalidation集成，以便将错误显示为浮动提示。 我遇到的问题是，显然在表单validation上调用errorPlacement并没有做任何事情，猜测它与MVC处理它的方式有关。

基本上，我想要做的是使用MVC3和jQuery（注释）之间的集成validation，但也与qTip集成以更改错误消息的显示方式。

我已经搜索了所有我找到的最好的是有人建议修改jquery.validate.unobtrusive.js – onError函数，但我检查了它并且不知道如何正确地修改它，加上更喜欢没有的解决方案要求我改变现有的脚本。

谢谢您的帮助。

到目前为止我所拥有的：

我的型号：

public class User { [Required] public string Id { get; set; } [Required] [DataType(DataType.EmailAddress)] public string Email { get; set; } public string FirstName { get; set; } public string SecondName { get; set; } public string LastName { get; set; } } 

我的观点中的javascript：

 $('#Form').validate({ errorClass: "errormessage", errorClass: 'error', validClass: 'valid', errorPlacement: function (error, element) { // 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 (true) { // 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'); } }, success: $.noop // Odd workaround for errorPlacement not firing! }) $('#Form').submit(function () { if (!$(this).valid()) return false; $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), beforeSend: function () { }, success: function (result) { }, error: function (result) { } }); return false; }); 

Answer 1

伟大的解决方案谢谢，我已经使用这个我的应用程序。

…为了进一步添加，我没有直接修改jquery.validate.unobtrusive.min.js文件，而是使用以下内容修改了不显眼的validation的默认行为。

 $(document).ready(function () { var settngs = $.data($('form')[0], 'validator').settings; settngs.errorPlacement = function(error, inputElement) { // Modify error placement here }; }); 

热切地执行ASP.NET MVC 3不显眼的客户端validation

Answer 2

替代解决方案

我的第一个解决方案有效，但在某些情况下也引起了一些意想不到的行为。 我通过在相同的js文件中的onError函数中包含errorPlacement代码来修复：

 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(); } var element = inputElement; // 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'); } } 

然后您可以提交表单，以这种方式检查validation：

 $('#frm').submit(function () { if (!$(this).valid()) return false; $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), beforeSend: function () { }, success: function (result) { }, error: function (result) { } }); return false; }); 

Answer 3

我的解决方案 – 可以在单独的.js文件中使用，如果放在母版页中，则适用于整个站点。

 $(document).ready(function () { //validation - make sure this is included after jquery.validate.unobtrusive.js //unobtrusive validate plugin overrides all defaults, so override them again $('form').each(function () { OverrideUnobtrusiveSettings(this); }); //in case someone calls $.validator.unobtrusive.parse, override it also var oldUnobtrusiveParse = $.validator.unobtrusive.parse; $.validator.unobtrusive.parse = function (selector) { oldUnobtrusiveParse(selector); $('form').each(function () { OverrideUnobtrusiveSettings(this); }); }; //replace validation settings function function OverrideUnobtrusiveSettings(formElement) { var settngs = $.data(formElement, 'validator').settings; //standard qTip2 stuff copied from sample settngs.errorPlacement = function (error, element) { // Set positioning based on the elements position in the form var elem = $(element); // 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: 'center left', // Position my top left... at: 'center right', // at the bottom right of... viewport: $(window) }, show: { event: false, ready: true }, hide: false, style: { classes: 'qtip-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'); } }; settngs.success = $.noop; } }); 

Answer 4

找到答案…张贴供参考。

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

2）其次，在脚本上找到函数validationInfo（form） ，并将选项结构中的errorPlacement指令替换为qTip或您选择的任何一个。

3）您希望在validation处理方式上改变的样式和其他选项也是如此。

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

有了Mantisimo和AJC答案（感谢他），我编写了以下脚本，它没关系，但是jquery.validate.unobtrusive.js会在每个提交表单中抛出错误：

 $(document).ready(function () { var $forms = $.data($('form')[0], 'validator'); if ($forms == undefined) return; var settngs = $forms.settings; settngs.errorPlacement = function (error, inputElement) { var element = inputElement; var elem = $(element), corners = ['left center', 'right center'], flipIt = elem.parents('span.right').length > 0; if (!error.is(':empty')) { 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: 'qtip-red', } }) .qtip('option', 'content.text', error); } else { elem.qtip('destroy'); } }; }); 

我已经使用MVC 5和qtip 2.2.0进行了测试