0

I'm running into an odd problem.

I'm using Jquery mobile and the well know validate plugin. Everything works fine except when I turn to false the data-native attribute. error message appears on submit, but never disappears onchange. I'm I missing something? UPDATE1: more weird, it updates when you click on the error message, or on the submit button

html code:

<div id="invalid-id_form_choose" class="errors"></div>
        <select id="id_form_choose" name="question" data-theme="b" data-native-menu="false" class="question">
            <option value="">Veuillez choisir</option>
<option  value="FIRST_PET_NAME">Quel est le nom de votre premier animal de compagnie ?/option>
<option  value="MOTHER_PLACE_OF_BIRTH">Dans quelle ville est née votre mère ?</option> 
        </select>

JS code:

jQuery.validator.addClassRules({
    question:{
       required: true
    }
});
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {

        error.appendTo('#invalid-' + element.attr('id'));


}
});
$(document).bind('pageinit',function(){
  $("#step1_form").validate({
     messages:{
         question:{
            required: "Veuillez renseigner ce champ obligatoire"
        }

    }
});

CSS code

.errors{
    color:red;
}
Lordshion
  • 1
  • 2

2 Answers2

1

data-native=false will hide original select box.

To validate it you will need to enable validation of hidden fields.

Read more about it here: jQuery Validate - Enable validation for hidden fields

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Hi, I tried this solution , but still not working. the error message disappears only when you click on it, or on the submit button. Maybe It's something about refreshing the element after the disappearing of the popup. – Lordshion Jul 25 '13 at 10:20
  • You're right Gajotres, and even weirder, if you have a 'pagechange' event listener on your document, you'll notice that it fires when the non-native selectmenu is opened. – Wytze Nov 05 '13 at 06:25
0

Okay I found the solution to my problem, this defenitly works fine

I found this cool code on github https://github.com/anumonk/mobileFormValidation So I changed mine as follows

I added this function to my JS code

function handleChangeEvent( event ) {
    // code based on the jQuery validation framework
    var validator = $.data( this[0].form, "validator" );
    validator.element( this[0] );
};

And just before $("#step1_form").validate this code

changeEventTargets = "[type='radio'], [type='checkbox'], select, option";
$("#step1_form").validateDelegate( changeEventTargets, "change", handleChangeEvent );

Hope it helps others, In the same case.

Lordshion
  • 1
  • 2