0

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

所以问题是:如何为选择启用验证?

4

1 回答 1

0

诀窍包括两部分:

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

这就是所有的人!

于 2012-11-09T10:33:40.903 回答