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已有多年历史。根据{{3}}，最新版本为1.13.1。
“表格在验证前不得提交”

您已将onsubmit设为false。根据文档，这会禁用onsubmit验证;因此，仅此一项就可以让您提交表格而无需任何验证。你是the developer's website，所以只需将其删除即可。
您已将所有自定义错误消息定义为空字符串，但您已将errorElement选项设置为span。这毫无意义。如果错误消息是空字符串，那么它们具有哪种容器并不重要。只需在return false函数内部errorPlacement，即可有效阻止所有错误消息。
您正在使用highlight和unhighlight定位span id element。由于您没有任何错误消息且span为空，因此该行完全是多余的。
您正在使用highlight设置一个每毫秒触发focus的计时器。当表单无效时，这会将所有内容抛入无限循环的闪烁元素中。我删除了它，因为插件会自动将焦点带到第一个无效字段。
您正在使用highlight将字段设置为空。这永远不会奏效。每次按键都会触发此功能，因此即使用户开始输入有效数据，您的代码也会在输入第一个字符后立即将其擦除。
除了在highlight/unhighlight中应用错误/有效类之外什么都没有，这是他们的默认行为。现在可以完全删除您的超越选项。
我已激活submit按钮以进行测试。

不确定这是否符合所有要求，但至少jQuery Validate插件正在运行......

<强> not allowed to set the onsubmit option to true

$("#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验证ErrorHandling

1 个答案: