与MVC3和jQuery验证（errorPlacement）将qTip [英] Integrating qTip with MVC3 and jQuery Validation (errorPlacement)
问题描述
我的工作有一个MVC3和proyect我试图用qTip2 jQuery验证，以显示错误的浮动提示进行整合。我遇到的问题是，表单验证显然调用errorPlacement没有做任何事情，你猜它是与MVC处理它的方式。
基本上，我想要做的是使用（注释），但也与qTip集成MVC3和jQuery之间的集成验证，更改错误味精的显示方式。
我都找遍了，我能找到的是有人建议修改jquery.validate.unobtrusive.js最好 - onError的功能，但我检查出来，不知道如何正确地修改它，加上将preFER不要求我改变现有脚本的解决方案。
感谢您的帮助。
我到目前为止有：
我的模型：
公共类用户
{
[需要]
公共字符串ID {搞定;组; } [需要]
[数据类型（DataType.EmailAddress）
公共字符串电子邮件{获得;组; } 公共字符串名字{获得;组; } 公共字符串SecondName {搞定;组; } 公共字符串名字{获得;组; }
}
我在我的观点的javascript：
$（'＃表）。验证（{
errorClass的ErrorMessage
errorClass：'错误'，
validClass：有效，
errorPlacement：功能（错误，元素）{
//基于表单的元素位置设置定位
VAR ELEM = $（元素），
角落= ['中间偏左，右中心']，
flipIt = elem.parents（'span.right'）长度GT。 0; //检查我们有一个有效的错误消息
如果属实） {
//应用工具提示仅当它是无效
elem.filter（'：没有（.valid）'）qtip（{。
覆盖：假的，
内容：错误，
位置：{
我：弯道[flipIt？ 0：1]，
位置：弯道[flipIt？ 1：0]，
视：$（窗口）
}，
显示： {
事件：假的，
准备：真
}，
隐藏：假的，
风格：{
类：UI-提示红色//使其成为红色...经典的错误色彩！
}
}） //如果我们有这个元素上已经提示，只需更新其内容
.qtip（'选项'，'content.text'，错误）;
} //如果错误是空的，去除qTip
其他{elem.qtip（'消灭'）; }
}，
成功：$ .noop //为不errorPlacement射击奇的解决方法！
}）$（'＃表）。递交（函数（）{
如果（！$（本）.valid（））
返回false; $阿贾克斯（{
网址：this.action，
类型：this.method，
数据：$（本）.serialize（）
beforeSend：功能（）{
}，
成功：函数（结果）{
}，
错误：功能（结果）{
}
}）;
返回false;
}）;
替代的解决方案
我的第一个解决方案的工作，但也造成在某些情况下一些意想不到的behaivior。我固定由包括对errorPlacement code在的onError 在同一个js文件的功能：
函数的onError（错误，inputElement）{//'这'是表单元素
VAR容器= $（本）.find（[数据valmsg换='+ inputElement [0]。名称+']），
取代= $ .parseJSON（container.attr（数据valmsg替换））==假的！; container.removeClass（现场验证，有效）addClass（现场验证错误）。
error.data（unobtrusiveContainer容器）; 如果（替换）{
container.empty（）;
error.removeClass（输入验证错误）appendTo（集装箱）。
}
其他{
error.hide（）;
} VAR元= inputElement;
//基于表单的元素位置设置定位
VAR ELEM = $（元素），
角落= ['中间偏左，右中心']，
flipIt = elem.parents（'span.right'）长度GT。 0; //检查我们有一个有效的错误消息
如果（error.is（！'：空'））{
//应用工具提示仅当它是无效
elem.filter（'：没有（.valid）'）qtip（{。
覆盖：假的，
内容：错误，
位置：{
我：弯道[flipIt？ 0：1]，
位置：弯道[flipIt？ 1：0]，
视：$（窗口）
}，
显示： {
事件：假的，
准备：真
}，
隐藏：假的，
风格：{
类：UI-提示红色//使其成为红色...经典的错误色彩！
}
}） //如果我们有这个元素上已经提示，只需更新其内容
.qtip（'选项'，'content.text'，错误）;
} //如果错误是空的，去除qTip
其他{elem.qtip（'消灭'）; }
}
然后就可以提交表单，检查确认是这样的：
$（'＃FRM）。递交（函数（）{
如果（！$（本）.valid（））
返回false; $阿贾克斯（{
网址：this.action，
类型：this.method，
数据：$（本）.serialize（）
beforeSend：功能（）{
}，
成功：函数（结果）{
}，
错误：功能（结果）{
}
}）;
返回false;
}）;
I am working on a proyect with MVC3 and I am trying to integrate qTip2 with jQuery validation in order to show errors as floating tips. The problem I am having is that apparently calling errorPlacement on form validation is not doing anything, guess it has something to do with the way MVC handles it.
Basically, what I want to do is use the integrated validation between MVC3 and jQuery (annotations) but also integrated with qTip to change how the error msg is shown.
I have searched all over and the best I could find was someone suggesting modifying the jquery.validate.unobtrusive.js - onError function, but I checked it out and had no idea how to modify it properly, plus would prefer a solution that did not require me to alter existing scripts.
Thank you for your help.
What I have so far:
My Model:
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; }
}
My javascript in my view:
$('#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;
});
Alternate Solution
My first solution worked, but also caused some unexpected behaivior in certain situation. I fixed by including the errorPlacement code on the onError function in the same js file:
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'); }
}
And then you can submit a form, checking for validation this way:
$('#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;
});
这篇关于与MVC3和jQuery验证（errorPlacement）将qTip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
