Question

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

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

因此，当发生错误时，jQuery validate将此类“input-validation-error”添加到此html元素中。我的问题是，当我选择有效值并提交（在表单中有其他错误）时，jquery会添加一个样式= “显示：无”到这个范围！所以我的选择列表看起来没有被选中......

涉及的跨度元素：

<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验证不使用jquery mobile创建的span作为错误字段？！

由于

Answer 1

我在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之间的CSS冲突   和jQuery Mobile，这意味着你将不得不使用很少使用   功能，为您的所有jQuery Mobile CSS添加前缀。

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

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

完成！

jQuery验证和jQuery Mobile选择列表冲突

1 个答案: