Jquery 验证插件。在字段失去焦点之前消息不可见

Posted 2023-05-09

【中文标题】Jquery 验证插件。在字段失去焦点之前消息不可见

【英文标题】：Jquery validate plugin. Messages not visible until field loses focus

【发布时间】：2013-03-19 06:00:56

【问题描述】：

我正在使用 jquery 验证插件。我发现只有在部署站点后才会出现的问题，即便如此，它似乎也是间歇性的。当我提交带有无效字段的表单时，它会阻止提交，但没有一个无效字段显示表明它们无效的消息。如果我将光标放在该字段中，然后标记出验证消息。似乎进行屏幕捕获会更新显示并导致出现消息。该问题出现在多种字段类型上，但这里以一种为例。

<input name="ProjectDescription" class="required" id="ProjectDescription" style="text-transform: uppercase;" type="text" maxLength="15" value=""/>

这是我的验证电话。

        $('#RequestForm').validate(
        ignore: ":hidden",
        ignoreTitle: true,
        submitHandler: function () 
            var f = $('#RequestForm');
            var action = '/Request/Request'
            var serializedForm = f.serialize();
            $.post(action, serializedForm,
                function (rtn) 
                    $("#Submit").removeAttr('disabled');
                    if (rtn.Success == true) 
                        var data = rtn.Result;
                        $('form')[0].reset();
                        $.jGrowl("Submitted Successfully",  life: 10000 );
                    
                    else 
                        $.jGrowl(rtn.ErrorMessage,  sticky: true );
                    
                );
            $("#Submit").attr('disabled', 'disabled');
            return false;
        ,
        invalidHandler: function (event, validator) 
            debugger
            console.log(validator);
        
    );

还有我的按钮处理程序

    $('#Submit').click(function () 
        $('#RequestForm').submit();

    );

我无法在小提琴或其他任何地方复制此问题。在编写此请求的过程中，它不再发生，但我没有进行任何代码更改。任何可能导致这种行为的帮助将不胜感激。我主要在 IE 9 中进行测试

更新：

我一直无法找到任何方法来可靠地复制该问题，但如果可以的话，我会继续尝试创建一个小提琴。在同一浏览会话期间，它会突然开始工作。通常，通过关闭并重新打开浏览器，我可以让该行为再出现 3-4 次尝试。根据我尝试在现场调用模糊和隐藏/显示的 cmets。这些都不会导致出现错误消息。按下打印屏幕按钮或将光标放在字段中并按下标签可靠地导致验证消息出现。有关该解决方案的一些附加信息：

页面由 MVC 3 生成。 我经常使用 javascript 和 ajax 来显示/隐藏字段。 字段的显示/隐藏发生在 ajax 回调中。

显示/隐藏此特定字段

                       if (project.PAContractClassID == "CAPITAL")  // capital
                            $('.capitalOnly').show();
                            $('.expenseOnly').hide();
                        
                        else if (project.PAContractClassID == "EXPENSE")   // expense
                            $('.expenseOnly').show();
                            $('.capitalOnly').hide();
                        

我的 MVC 代码生成字段

@html.TextBoxFor(m => m.ProjectDescription, new  @name="ProjectDescription", @class = "required", maxlength = "15", style = "text-transform:uppercase;" )           

【问题讨论】：

如果它是间歇性的，那么我真的不知道任何人可以帮助你。我们必须看到问题才能解决它。任何人发布随机猜测和建议作为答案也不太合适。还显示更多的 HTML 代码......足以构建一个简洁的示例。 form 标签和你的submit 按钮？

我会在这里提出一些建议。当您在 .validate() 中声明规则而不是内联 HTML 时会发生什么？另外，尝试将maxLength 的拼写更改为maxlength。

如果您的submit 按钮包含在<form></form> 中，那么绝对不需要提供click 处理函数来提交表单。

@Sparky - 我看到很多问题都有很好的有用答案，其中包括“这可能是你的问题。如果是，这就是解决方案。”

@BenBarden，请read the FAQ 和explore the Meta site.... SO 是关于简明问题的简明答案。这个问题似乎不包含损坏的代码，因此发布的所有内容都可能是随机噪音。我的 cmets 只是为了让 OP 改进问题以避免投票和关闭。

【参考方案1】：

Sparky 同上：如果您的提交按钮包含在 <form></form> 中，那么绝对不需要提供单击处理函数来提交表单。

如果您没有使用提交按钮，而只是使用type=button，请尝试使用type=submit，看看问题是否消失。

【参考方案2】：

经过大量测试后，我隔离了我的 _Layout.cshtml 中对 jquery.unobtrusive-ajax 的引用，因为它干扰了 jquery validate 的行为。删除对 j​​query.unobtrusive-ajax 的引用后，我没有再次收到错误。我将继续做一些测试，看看我添加这些引用的顺序是否会产生影响，但我不想让这个问题悬而未决。谢谢大家的建议。