jquery-mobile - 如何在使用 JQueryMobile 时使用 JQuery.Validate 验证选择

Question

我只是在探索 JQuery 的 Validate 插件。在我用 JQueryMobile 制作的 webapp 中实现的过程中，我偶然发现验证这样的元素并不像通常的输入元素那么简单。

所以问题是：如何为选择启用验证？

Answer 1

诀窍包括两部分：

1. Validate 默认忽略:hidden. 但这就是 JQM 对 an 所做的<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
    });
});

这就是所有的人！