[英]Integrating qTip with MVC3 and jQuery Validation (errorPlacement)
我正在使用MVC3開發一個proyect,並且試圖將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;
});
很好的解決方案,謝謝,我已經在我的應用程序中使用了它。
...要進一步添加,而不是直接修改jquery.validate.unobtrusive.min.js文件,我使用以下內容修改了非侵入式驗證的默認行為。
$(document).ready(function () {
var settngs = $.data($('form')[0], 'validator').settings;
settngs.errorPlacement = function(error, inputElement) {
// Modify error placement here
};
});
替代解決方案
我的第一個解決方案有效,但在某些情況下也引起了一些意外的行為。 我通過在同一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'); }
}
然后,您可以提交表單,以這種方式檢查驗證:
$('#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;
});
我的解決方案-可以在單獨的.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;
}
});
找到了答案...發布以供參考。
1)首先,找到Microsoft提供的腳本jquery.validate.unobtrusive.js 。
2)其次,在腳本上找到函數 validateInfo (form),並用qTip提供的一種或您選擇的任何一種來替換options結構中的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;
}
使用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進行了測試
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.