jquery mobile验证“data-native = false”更改时选择框不起作用答案

【问题标题】：jquery mobile validate "data-native=false" selectbox on change not workingjquery mobile验证“data-native = false”更改时选择框不起作用
【发布时间】：2013-07-22 10:18:12
【问题描述】：

我遇到了一个奇怪的问题。

我正在使用 Jquery mobile 和众所周知的验证插件。一切正常，除非我将 data-native 属性设置为 false 。提交时出现错误消息，但在更改时永远不会消失。我错过了什么？ UPDATE1：更奇怪的是，当您单击错误消息或提交按钮时它会更新

html代码：

<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代码：

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

.errors{
    color:red;
}

【问题讨论】：

标签： jquery validation jquery-mobile jquery-plugins

【解决方案1】：

data-native=false 将隐藏原来的选择框。

要验证它，您需要启用隐藏字段验证。

在此处了解更多信息：jQuery Validate - Enable validation for hidden fields

【讨论】：

嗨，我尝试了这个解决方案，但仍然无法正常工作。只有当您单击它或提交按钮时，错误消息才会消失。也许是弹出消失后刷新元素的东西。
你是对的 Gajotres，甚至更奇怪的是，如果你的文档上有一个 'pagechange' 事件监听器，你会注意到它会在非本地选择菜单打开时触发。

【解决方案2】：

好的，我找到了解决问题的方法，这绝对可以正常工作

我在 github https://github.com/anumonk/mobileFormValidation 上找到了这个很酷的代码所以我改变了我的如下

我将此函数添加到我的 JS 代码中

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

就在 $("#step1_form").validate 这段代码之前

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

希望它可以帮助其他人，在同样的情况下。

【讨论】：