I was wondering if it would be possible to use qTip2 to display the tooltips from the validation, instead of the default ones. I have spent several days trying to do this, with little success.
http://qtip2.com/api
With the jQuery Unobtrusive Validation, I can achieve this with the following edits to the code;
But I am having a difficult time figuring out how to replicate this behavior with Kendo UI.
http://qtip2.com/api
With the jQuery Unobtrusive Validation, I can achieve this with the following edits to the code;
function
onError(error, inputElement) {
// 'this' is the form element
var
container = $(
this
).find(
"[data-valmsg-for='"
+ escapeAttributeValue(inputElement[0].name) +
"']"
),
replaceAttrValue = container.attr(
"data-valmsg-replace"
),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !==
false
:
null
;
//replace = $.parseJSON(container.attr("data-valmsg-replace")) !== undefined;
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'],
corners = [
'bottom left'
,
'top 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:
'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'
); }
}