Using JQuery Validation Engine Plugin with JQuery Mobile

Question

I am trying to use JQuery Validation Engine Plugin described in the following

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

with JQuery Mobile controls. it works fine with text boxes, however the validation balloon is not showing up for QJM Dropdowns. but the dropdown is getting valdiated thought while submitting the form, only the reg ballon is not showing up.

Any expert Opinion would be highly appreciable.

Answer 1

I did manage to show up the balloon by enclosing select menus with in div element and then show validation prompt via Script.

<div id="validationPromptPropertyLevelDropDown" > 
            <select id="propertyLevelDropDown" data-bind="options: PropertyLevels,  value: PropertyLevelId ,  optionsText: 'PropertyLevelDescription', optionsValue: 'Id', optionsCaption: 'Choose one...'" name="propertyType" data-native-menu="false" ></select> 
        </div>

$('#validationPromptPropertyLevelDropDown').validationEngine('showPrompt', 'This field is required', 'fail');

Answer 2

Just put at the div. The validation message will balloned at the label of selection. BUT THIS ONE IS NOT WORK ACTUALLY. WE JUST CANT DE-VALIDATED AGAIN. WHAT I DID TO SOLVE IT IS TO SET the first option to be Choose One.... Then using jQuery to read the value of being selected and alert for inserting the right value. I using onClick and $('#yourselectioncontrolId").focus(); You do not have to use Validation Engine Plugin for this. It was not design totally for jQueryMobile. You could edit their CSS to achieve better for JQM. But it gonna be a tedious work. Anyway, I am using it also on JQM project. But at certain level, it has its own limitation.

$('#districtName').on('focus', function (e) {
    if ($('#malaysianState').val() == 'MY-00') {
        alert('Please select any state first');
        $('#malaysianState').focus();
    }

    e.preventDefault;
    return false;
});

MY JQUERY MOBILE CONTROL WOULD BE

<div data-role="fieldcontain">
                <label for="malaysianState" class="select">
                    <span lang="ms" id="stateName-label">Malaysian State</span>
                </label>
                <select name="malaysianState" id="malaysianState" data-native-menu="false">
                    <option value="NOT SELECTED" data-placeholder="true">Choose One...</option>
                    <option value="MY-01">Johor</option>
                    <option value="MY-02">Kedah</option>
                    <option value="MY-03">Kelantan</option>
                    <option value="MY-04">Melaka</option>
                    <option value="MY-05">Negeri Sembilan</option>
                    <option value="MY-07">Pulau Pinang</option>
                    <o
                    <option value="MY-16">WP Putrajaya</option>
                </select>
            </div>

             <div id="districtName-label" lang="ms">Select District </div>
                   <input id="districtName" class="validate[required] text-input" />
                   <input type="hidden" id="districtName-id" />
                <p></p>
<div>