Интеграция qTip с MVC3 и jQuery Validation (errorPlacement)
Я работаю над proyect с 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;
});
Ответы
Ответ 1
Альтернативное решение
Мое первое решение сработало, но в определенной ситуации также вызвало некоторое неожиданное поведение. Я исправил включение кода ошибки в функцию onError в том же файле js:
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;
});
Ответ 2
Отличное решение спасибо, я использовал это приложение.
... Чтобы добавить, вместо изменения файла jquery.validate.unobtrusive.min.js, я использовал следующее, чтобы изменить поведение по умолчанию ненавязчивой проверки.
$(document).ready(function () {
var settngs = $.data($('form')[0], 'validator').settings;
settngs.errorPlacement = function(error, inputElement) {
// Modify error placement here
};
});
Ужасно выполнение ASP.NET MVC 3 Ненавязчивая проверка на стороне клиента
Ответ 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;
}
});
Ответ 4
Нашел ответ... опубликование для справки.
1) Сначала найдите script jquery.validate.unobtrusive.js, предоставленный Microsoft.
2) Во-вторых, на script найдите function validationInfo (form) функцию и замените команду errorPlacement в структуре опций той, которая предоставляется qTip, или любой из ваших пожеланий.
3) То же самое касается стиля и других параметров, которые вы хотите изменить в том, как обрабатывается валидация.
4) Необходимо включить все необходимые файлы.
Надеюсь, что это поможет кому-то, у кого есть аналогичная проблема.
Пример кода:
function validationInfo(form) {
var $form = $(form),
result = $form.data(data_validation);
if (!result) {
result = {
options: { // options structure passed to jQuery Validate 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;
}
Ответ 5
С ответами Mantisimo и AJC (спасибо) я написал следующий script, это нормально, и он работает без проблем, но 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'); }
};
});
![jquery.validate.unobtrusive.js error]()
Я тестировал с MVC 5 и qtip 2.2.0
