Question

尝试验证可见字段时出现typeError undefined is not a function错误。

我定义了在全局范围内保存 jquery验证器的变量，但是从symfony动态生成的匿名函数闭包中执行。验证（）。 /树枝/ JqueryValidationBundle。

我这样做是因为我想将生成的代码用于包含在单独的js文件中的自定义函数。

有可能这样做吗？还是有另一种方法来重用生成的代码？

这是生成的函数：

<script>
var form, groups;
(function($) {
    form = $("form[name=\"scs_intakebundle_intake\"]");
    groups = {"Default": false,"firstPanel": false};
    form.find("*[name=\"scs_intakebundle_intake\x5Bsubmit\x5D\"]").click(function() {
        groups = {"Default": true,"firstPanel": true};
    });

    form.validate({
        rules: {
            "scs_intakebundle_intake\x5BfirstName\x5D": {
                "required": {depends: function() {return groups["firstPanel"]; }}
            },
            "scs_intakebundle_intake\x5BlastName\x5D": {
                "required": {depends: function() {return groups["firstPanel"]; }}
            }
        }});
})(jQuery);
</script>

这是来自intake.js

的功能

function nextPanel() {
    var result = true;
    $('input:visible').each(function(i,item){
        //form is the global var that .validate() was already run.
        //below is where form.element is undefined.
        result = form.element(item) && result;
        //the next line did not work either, but I though I'd share
        result = item.valid() && result;
    } );
    if (result) {
         $('.first').slideUp();
         $('.second').slideDown();        
    }
}

这是html表单：

    <form name="scs_intakebundle_intake" method="post" action="/v2/web/app_dev.php/" novalidate="novalidate">
    <input type="hidden" id="scs_intakebundle_intake__token" name="scs_intakebundle_intake[_token]" value="956WbsNijk_3F_8X_0IGolrcdZaZzar93OwVHAxspyo">

    <div class="first">
        <div class="row">
            <div class="medium-7 columns">
                <input type="text" id="scs_intakebundle_intake_firstName" name="scs_intakebundle_intake[firstName]" required="required" maxlength="255" aria-required="true">
            </div>
        </div>
        <div class="row">
            <div class="medium-7 columns">
                <input type="text" id="scs_intakebundle_intake_lastName" name="scs_intakebundle_intake[lastName]" required="required" maxlength="255" aria-required="true">
            </div>
        </div>
        <div>
            <button type="button" id="scs_intakebundle_intake_next1" name="scs_intakebundle_intake[next1]" style="margin:0;" class="next1 panelButton" onclick="nextPanel();">Find my plan</button>
        </div>
    </div>

    <div class="second">
        <div class="row">
            <div class="medium-7 columns">
                <div id="scs_intakebundle_intake_married">
                    <input type="radio" id="scs_intakebundle_intake_married_0" name="scs_intakebundle_intake[married]" value="0">
                    <label for="scs_intakebundle_intake_married_0">No</label><input type="radio" id="scs_intakebundle_intake_married_1" name="scs_intakebundle_intake[married]" value="1">
                    <label for="scs_intakebundle_intake_married_1">Yes</label></div>
            </div>
        </div>
        <div class="row" style="padding: 1.1rem">
            <button type="button" id="scs_intakebundle_intake_prev1" name="scs_intakebundle_intake[prev1]" style="float:left" class="prev1 panelButton" onclick="previousPanel();">Previous</button>
            <button type="submit" id="scs_intakebundle_intake_submit" name="scs_intakebundle_intake[submit]" class="panelButton">Find my plan</button>
        </div>
    </div>
</form>

我在chrome devtools控制台中验证了$('input:visible')确实包含我要检查的表单元素。 form.validate()确实返回$ .validator对象。

单击最终提交按钮时验证确实有效，但是当我尝试从自定义函数触发验证时，验证不起作用。

有什么想法吗？

Answer 1

重要：如果您在致电.validate()时该表单尚未存在，那么在此之前您无法调用.validate()。您也无法在同一表单上多次拨打.validate()。

Answer 2

好吧，我发现了实际问题并且对这篇文章有2个答案。

我忘了提到div.second是通过css隐藏的。匿名功能块尝试查找提交按钮以添加click事件的代码。此按钮在当时隐藏。因此，如果功能不完整，则验证无法运行。当我删除与隐藏部分相关的代码时，一切都很顺利。
作为一个新手，我没有意识到我可以通过重新运行验证代码来访问验证器对象。因此添加var validator = $('form").validate();让我可以访问该帖子的原始问题。即便如此，关于隐藏元素，它也没有像上面解释的那样起作用。

谢谢大家的帮助。

从匿名函数重用jQuery验证

2 个答案: