Question

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

所以问题是：如何启用select的验证？

Answer 1

这个技巧由两部分组成：

默认情况下，验证忽略:hidden。但这就是JQM对<select>所做的事情：隐藏它并在顶部放置一个div-span-wrapper。解决方案是重新定义ignore-selector：
```
{ignore: ":hidden:not(select)"}
```

要通知用户有关无效字段的信息，您必须在包装器上显示错误：

$(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
    });
});

这就是所有人！

如何在使用JQueryMobile时使用JQuery.Validate验证select

1 个答案: