【问题标题】:qtip2 not displayed for hidden model elements used for model validation in mvc4qtip2 未显示用于 mvc4 中的模型验证的隐藏模型元素
【发布时间】:2014-04-10 19:32:37
【问题描述】:

我正在使用 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
                // 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>

现在我想显示 PhysicianType 的错误消息,但它不可见;不显示错误消息。我使用以下代码显示隐藏元素的工具提示

 $(function () {
        $.validator.setDefaults({ ignore: [] });
    });

上面的代码也显示了隐藏元素的错误代码,但是qtip的位置是屏幕的左上角;不附加到元素本身。
在隐藏元素的情况下,请帮助准确定位 qtip2 错误。

【问题讨论】:

  • 你找到答案了吗?我有同样的问题。
  • 实际上我使用的是剑道 ui(第三方控件);它创建具有相同 id 的隐藏字段。因此 qtip 无法将错误消息定位到正确的位置。
  • 我所做的是注释掉以下代码 $(function () { $.validator.setDefaults({ ignore: [] }); });并手动将 qtip 应用于靠近该控件的第一个(创建的)span
  • if (somecondition.value() == 0) { $('span:first', "#NegCdtDDl").qtip({ content: { text: "请选择控制值" } , 显示: { 准备好: true }, 位置: { at: 'top center', my: 'bottom center', viewport: $(window) }, hide: false }); } else { $('span:first', "#NegCdtDDl").qtip('destroy'); }

标签: jquery asp.net-mvc asp.net-mvc-4 qtip qtip2


【解决方案1】:
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'); }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    相关资源
    最近更新 更多