CODEWITHSUNDEEP
jqueryhtmlasp.net-mvc-4jquery-mobilejquery-validate
LoSTxMiND
LoSTxMiND

Reputation: 332

jQuery validation and jQuery Mobile select list conflicts

First i'm using ASP.Net MVC4 and latest jQuery 2.0.3, jQuery mobile 1.3.1, jQuery UI 1.10.3 and jQuery Unobstrusive Validation Plugin 1.11.1

I got a probleme with jQuery validation.. it confounds the display text of the select list and the error message...

So jQuery validate adds the class "input-validation-error" to this html element when error occurs.. My problem is that when i choose a valid value and submit (with other errors in the form) jquery adds a style="display:none" to this span ! So my select list appears like nothing was selected...

The span element concerned : 

<span>Select a card</span>

The Html code below is generated with :

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

and the submit button :

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

Here is an exemple :

Initial state of generated select list :

<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>

So how do i say to jquery validate to not use the span created by jquery mobile as an error field ?!

Thanks

Upvotes: 2

Views: 848

Answers (1)

LoSTxMiND
LoSTxMiND

Reputation: 332

I found a little help in another post i made on the jquery forums (http://forum.jquery.com/topic/conflict-with-jquery-validate)

http://api.jquerymobile.com

jQuery Mobile 1.3 supports jQuery 1.7.0 to 1.9.1

Further, while the jQuery Mobile and jQuery UI teams are working toward compatibility (in 1.4 and later), jQuery Mobile is not compatible with jQuery UI. They weren't designed to be compatible. Some developers have gotten some functionality to work together, or have gotten some third-party plugins to work. (And there are some jQuery UI plugins that are explicitly designed to work with both jQuery UI and jQuery Mobile - for example, jquery.ui.maps comes to mind) it almost always will take some modification or trickery.

You will at least have to resolve the CSS conflicts between jQuery UI and jQuery Mobile, which means you will have to use a seldom-used feature to add a prefix to all of your jQuery Mobile CSS.

So decided to use CSS to fix this, and the solution is really simple as :

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

Done!

Upvotes: 0

Related Questions