使用jQuery验证插件:onfocusout,onkeyup在生产站点上按预期工作

时间:2011-10-16 17:29:37

标签: javascript jquery jquery-plugins jquery-validate validation

我正在使用jQuery Validate plugin v.1.9.0它非常好用。但是,一旦用户提交表单&如果有任何错误,它会正确显示错误消息。问题是,如果用户采取措施来纠正该错误,它不会更新消息。例如。如果需要字段,在第一次收到消息时,用户开始输入,那么该消息应该消失。

在文档中,它提到 onfocusout & onkeyup 用于此目的&默认情况下,它们设置为true。有趣的是它似乎在我的本地工作站上工作,但是一旦我将代码上传到生产站点,它就会失败(默默地)。我以为我在某种程度上把它弄得一团糟,所以我开火了 jsfiddle and put relevant code ,看它是否也在那里发生。

我很高兴看到它也在那里发生。所以我的问题是为什么它可以在我的本地机器上运行而不在生产站点上运行?

P.S。 http://jsfiddle.net/tankchintan/cge44/5/

上的自包含示例

更新

要复制此问题,请执行 -

  1. 转到jsfiddle页面。
  2. 如果没有填写任何字段,请提交表单。
  3. 除了每个字段外,它会显示错误消息。
  4. 现在开始输入任何一个字段。
  5. 您会注意到即使规则已满足,错误消息也不会消失。在我的本地机器上,一旦我在现场输入任何内容,错误判断就会消失。

5 个答案:

答案 0 :(得分:29)

请改用它!

onkeyup: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },

答案 1 :(得分:16)

这个问题甚至出现在JQuery网站的一些例子中。

我发现输入元素没有类型时会出现问题。 Web浏览器假设类型为“text”(如果未指定),但jquery.validate存在问题。您的input元素应如下所示:

<input id="cname" name="name" type="text" class="required" minlength="2" />

答案 2 :(得分:2)

如果你的jQuery库太新了,显然这不起作用。我遇到了同样的事情,从jquery v1.7.2回滚到v1.3.2修复了问题。

http://jquery.bassistance.de/validate/demo/的示例页面使用1.3.2,但我不确定发生了哪个特定版本的jquery。

答案 3 :(得分:2)

以下适用于我:

$(document).ready(function () {
        $("#myFormElement").submit(function (event) {
            var validator = $.data($('form')[0], 'validator');
            validator.settings.onfocusout = function (element) { $(element).valid(); };
            validator.settings.onkeyup = function (element) { $(element).valid(); };
        });

        var validator = $.data($('form')[0], 'validator');
        validator.settings.onfocusout = false;
        validator.settings.onkeyup = false;
    });

这会禁用初始onkeyup验证。如果用户然后单击提交,我们将重新启用验证,以便在该字段有效后,他/她将立即得到反馈。

我不确定为什么这些属性最初是布尔值,然后是对submit事件的回调。我只是通过在submit事件中将属性设置为true来找到该方法,这会在验证库中引发异常(正在尝试调用函数)。

答案 4 :(得分:0)

我认为默认行为是仅在字段验证时隐藏该消息,例如输入“foo@example.com”后,“请输入有效的电子邮件地址”消失,我觉得这很有意义。

请参阅演示:http://jquery.bassistance.de/validate/demo/

我认为你可能会尝试做类似的事情:jquery validate: focusCleanup: true and focusInvalid: false don't work as expected