我正在使用 MVC3 开发一个项目,并且我正在尝试将 qTip2 与 jQuery 验证集成,以便将错误显示为浮动提示。我遇到的问题是,显然在表单验证上调用 errorPlacement 没有做任何事情,猜测它与 MVC 处理它的方式有关。
基本上,我想要做的是使用 MVC3 和 jQuery(注释)之间的集成验证,但也与 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;
});