2

首先，我使用 ASP.Net MVC4 和最新的 jQuery 2.0.3、jQuery mobile 1.3.1、jQuery UI 1.10.3 和 jQuery Unobtrusive Validation Plugin 1.11.1

我遇到了 jQuery 验证问题。它混淆了选择列表的显示文本和错误消息...

因此，当发生错误时，jQuery validate 将类“input-validation-error”添加到此 html 元素中。我的问题是，当我选择一个有效值并提交（表单中有其他错误）时，jquery 添加了一个 style="display:没有”到这个跨度！所以我的选择列表似乎没有被选择...

涉及的 span 元素：

<span>Select a card</span>

下面的 Html 代码是通过以下方式生成的：

   @Html.LabelFor(model => model.CardType)
   @Html.DropDownListFor(model => model.CardType, Model.CardList)

和提交按钮：

<button type="submit" data-transition="flip" data-theme="e" data-role="button">Buy</button>

这是一个例子：

生成的选择列表的初始状态：

<div class="ui-select">
    <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-right">
        <span class="ui-btn-inner">
            <span class="ui-btn-text">
                <span>Select a card</span>
            </span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
        </span>
        <select data-val="true" data-val-required="Please select a payment card" id="CardType" name="CardType">
            <option value="">Select a card</option>
            <option value="Visa">Visa</option>
            <option value="AmericanExpress">American Express</option>
            <option value="MasterCardPrepago">MasterCard Prepago</option>
            <option value="EuroCardMasterCard">EuroCard / MasterCard</option>
            <option value="CarteBleue">Carte bleue nationale</option>
            <option value="VisaDebit">Visa Debit</option>
            <option value="VisaElectron">Visa Electron</option>
        </select>
    </div>
</div>

那么我如何对 jquery validate 说不要使用 jquery mobile 创建的跨度作为错误字段呢？！

谢谢

4

1 回答 1

0

我在 jquery 论坛 ( http://forum.jquery.com/topic/conflict-with-jquery-validate )上发表的另一篇文章中找到了一些帮助

http://api.jquerymobile.com

jQuery Mobile 1.3 支持 jQuery 1.7.0 到 1.9.1

此外，虽然 jQuery Mobile 和 jQuery UI 团队正在努力实现兼容性（在 1.4 和更高版本中），但 jQuery Mobile与 jQuery UI不 兼容。它们的设计初衷不是兼容。一些开发人员已经获得了一些可以协同工作的功能，或者已经获得了一些第三方插件来工作。（并且有一些 jQuery UI 插件被明确地设计为与 jQuery UI 和 jQuery Mobile 一起使用 - 例如，jquery.ui.maps 浮现在脑海中）它几乎总是需要一些修改或技巧。

您至少必须解决 jQuery UI 和 jQuery Mobile 之间的 CSS 冲突，这意味着您将不得不使用一个很少使用的功能来为所有 jQuery Mobile CSS 添加前缀。

所以决定使用 CSS 来解决这个问题，解决方案非常简单：

.ui-select .input-validation-error { display: block !important;}

完毕！

于 2013-09-17T09:40:46.683 回答