jQuery 验证错误处理

Question

我正在使用 jQuery Validate 插件。现在，如果存在无效元素，则应清除并选择该元素。此外，在验证之前不得提交表单。代码似乎没有按预期工作。

可能是什么问题？

这是我的代码：

$("#track").validate({
    onsubmit: false,
    focusInvalid: true,
    focusCleanup: true,
    errorElement: "span",
    errorClass: "invalid",
    validClass: "valid",
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass);
        $(element.form).find("span[id=" + element.id + "-error]").addClass(errorClass);
        ion.sound.play("error");
        },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("span[id=" + element.id + "-error]").removeClass(errorClass);
        ion.sound.play("success");
    },
    rules: {
        prio: {
            prio : true,
            required: true
        },
        lagerort: {
            place : true,
            required: true
        },
        ident: {
            ident : true,
            required: true
        }
    },
    messages: {
        prio:  {
            required: ""
        },
        lagerort: {
            required: ""
        },
        ident: {
            required: ""
        }
    },
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    }
});

Answer 1

你想做什么还不清楚，但我发现了一些问题 in your jsFiddle:

您包含的插件版本 1.5.2 已有多年历史。根据 the developer's website.
"the form must not submitted before it is validated"

您已将 onsubmit 设置为 false。根据文档，这会禁用 onsubmit 验证；因此仅此一项就允许您在没有任何验证的情况下提交表单。你是not allowed to set the onsubmit option to true，干脆去掉吧
您已将所有自定义错误消息定义为空字符串，但您已将 errorElement 选项设置为 span。这是没有意义的。如果错误消息是空字符串，那么它们有什么样的容器都没有关系。只需在 errorPlacement 函数中 return false 即可有效阻止所有错误消息。
您正在使用 highlight 和 unhighlight 以 element 的 id 定位 span。由于您没有任何错误消息并且 span 为空，因此这一行完全是多余的。
您正在使用 highlight 设置每毫秒触发 focus 的计时器。当表单无效时，这会将所有内容抛入闪烁元素的无限循环中。我删除它是因为插件会自动将焦点放在第一个无效字段上。
您正在使用 highlight 将字段设置为空。这永远行不通。此函数在每次击键时触发，因此即使用户开始输入有效数据，您的代码也会在键入第一个字符后立即将其擦除为空白。
除了在 highlight/unhighlight 中应用 error/valid 类之外别无他法，这已经是它们的默认行为了。现在可以完全删除您的优先选项。
出于测试目的，我激活了 submit 按钮。

不确定这是否满足所有要求，但至少 jQuery 验证插件正在运行...

http://jsfiddle.net/vke1u6qL/3/

$("#track").validate({
    errorClass: "invalid",
    validClass: "valid",
    rules: {
        prio: {
            prio: true,
            required: true
        },
        lagerort: {
            place: true,
            required: true
        },
        ident: {
            ident: true,
            required: true
        }
    },
    errorPlacement: function() {
        return false;
    },
    submitHandler: function (form) {
        $(form).ajaxSubmit();
    }
});

jQuery 验证错误处理

jQuery Validate ErrorHandling

jquery

jquery-validate