我只是在探索 JQuery 的 Validate 插件。在我用 JQueryMobile 制作的 webapp 中实现的过程中,我偶然发现验证这样的元素并不像通常的输入元素那么简单。
所以问题是:如何为选择启用验证?
我只是在探索 JQuery 的 Validate 插件。在我用 JQueryMobile 制作的 webapp 中实现的过程中,我偶然发现验证这样的元素并不像通常的输入元素那么简单。
所以问题是:如何为选择启用验证?
诀窍包括两部分:
Validate 默认忽略:hidden
. 但这就是 JQM 对 an 所做的<select>
:隐藏它并在顶部放置一个 div-span-wrapper。解决方案是重新定义忽略选择器:
{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
});
});
这就是所有的人!