如何在使用JQueryMobile時驗證使用JQuery.Validate進行選擇

Question

我只是在研究JQuery的Validate插件。在使用JQueryMobile製作webapp的過程中，我偶然發現驗證這樣的元素不像通常的輸入元素那麼簡單。

所以問題是：如何啓用驗證選擇？

Answer 1

訣竅包括了兩個部分：

1. 驗證默認情況下忽略:hidden。但這就是JQM對<select>所做的：隱藏它並在上面放置一個div-span-wrapper。解決辦法是重新定義忽略-選擇：

   {ignore: ":hidden:not(select)"} 
   

2. 爲了向用戶告知你必須表明，權在包裝錯誤的無效字段：

   $(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput") 
   

在

現在工作示例：

$.validator.setDefaults({ 
    debug: true, 
    ignore: ":hidden:not(select)", 
    submitHandler: function() { alert("submitted!"); }, 
    showErrors: function(map, list) { 
     $(this.currentElements).each(function() { 
      if(this.nodeName == "SELECT") { 
       $(this).closest('.ui-select').removeAttr("title").removeClass("invalidInput"); 
       return true; 
      } 
      $(this).removeAttr("title").removeClass("invalidInput"); 
     }); 
     $.each(list, function(index, error) { 
      if(error.element.nodeName == "SELECT") { 
       $(error.element).closest('.ui-select').attr("title", error.message).addClass("invalidInput"); 
       return true; 
      } 
      $(error.element).attr("title", error.message).addClass("invalidInput"); 
     }); 
    } 
}); 

$('div[data-role="page"]').bind('pageinit', function(event) { 
    var rules = {}; 
    $('input:not(:button)').each(function() { 
     rules[this.name] = {required:true}; 
    }); 
    $('#fzgherst').each(function() { 
     // revalidates the select when changed, other elements gets revalidatet onblur 
     $(this).on('change', function() {$(this).valid();}); 
     rules[this.name] = {required:true}; 
    }); 
    $("form").validate({ 
     rules: rules 
    }); 
}); 

這就是所有人！