Jquery 对于mvc4中用于模型验证的隐藏模型图元,不显示qtip2
我使用qtip2在MVC4应用程序中显示客户端验证Jquery 对于mvc4中用于模型验证的隐藏模型图元,不显示qtip2,jquery,asp.net-mvc,asp.net-mvc-4,qtip,qtip2,Jquery,Asp.net Mvc,Asp.net Mvc 4,Qtip,Qtip2,我使用qtip2在MVC4应用程序中显示客户端验证 $(function () { // Run this function for all validation error messages $('.field-validation-error').each(function () { // Get the name of the element the error message is intended for
$(function () {
// Run this function for all validation error messages
$('.field-validation-error').each(function () {
// Get the name of the element the error message is intended for
// Note: ASP.NET MVC replaces the '[', ']', and '.' characters with an
// underscore but the data-valmsg-for value will have the original characters
var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_');
var corners = ['top center', 'bottom center'];
var flipIt = $(inputElem).parents('span.right').length > 0;
// Hide the default validation error
$(this).hide();
// Show the validation error using qTip
$(inputElem).filter(':not(.valid)').qtip({
content: { text: $(this).text() }, // Set the content to be the error message
position: {
my: corners[flipIt ? 0 : 1],
at: corners[flipIt ? 1 : 0],
viewport: $(window)
},
show: {
ready: true
//modal: {
// on: true
//}
},
//hide: false,
hide: {
event: 'unfocus'//event: 'click mouseleave'
},
//style: { classes: 'ui-tooltip-red' }
});
});
});
This is working fine until the element on which error message is to be displayed is visible.
I am using the kendo ui MVC helpers for controls like dropdownbox ,selectlist etc.
it hides the original element with its own.following the html generated (check element with id PhysicianType)
<span class="k-widget k-dropdown k-header input-validation-error" style="margin: 0px 0px 0px 28px; width: 181px; font-family: 'Segoe UI';" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="PhysicianType_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="PhysicianType_option_selected">
<span class="k-dropdown-wrap k-state-default" unselectable="on">
<span class="k-input" unselectable="on">Select Type</span>
<span class="k-select" unselectable="on">
</span>
<input id="PhysicianType" class="input-validation-error" type="text" style="margin: 0px 0px 0px 28px; width: 181px; font-family: 'Segoe UI'; display: none;" name="PhysicianType" data-role="dropdownlist">
</span>
上面的代码也显示隐藏元素的错误代码,但qtip的位置在屏幕的左上角;未连接到元素本身。如果隐藏元素,请帮助准确定位qtip2错误 你找到答案了吗?我也有同样的问题。实际上,我使用的是剑道ui(第三方控件);它创建了具有相同id的隐藏字段。因此qtip无法将错误消息定位到正确的位置。我所做的是在以下代码$(function(){$.validator.setDefaults({ignore:[]});})中注释掉; 并将qtip手动应用于靠近该控件的第一个(创建的)span如果(somecondition.value()=0){$('span:first',“#negcdtdl”).qtip({content:{text:{Please Select value for control},show:{ready:true},位置:{at:'top-center',my:'bottom-center',viewport:$(window)},hide:false};}else{$('span:first',“#negcdddl”).qtip('destroy');}
if (somecondition.value() == 0) { $('span:first', "#NegCdtDDl").qtip({ content: { text: "Please Select value for control" }, show: { ready: true }, position: { at: 'top center', my: 'bottom center', viewport: $(window) }, hide: false }); } else { $('span:first', "#NegCdtDDl").qtip('destroy'); }
if (somecondition.value() == 0) { $('span:first', "#NegCdtDDl").qtip({ content: { text: "Please Select value for control" }, show: { ready: true }, position: { at: 'top center', my: 'bottom center', viewport: $(window) }, hide: false }); } else { $('span:first', "#NegCdtDDl").qtip('destroy'); }