从匿名函数重用 jQuery 验证答案

【问题标题】：reuse jQuery validate from anonymous function从匿名函数重用 jQuery 验证
【发布时间】：2014-12-05 01:31:19
【问题描述】：

我在尝试验证可见字段时收到 typeError undefined is not a function 错误。

我定义了在全局范围内保存 jquery 验证器 的变量，但在 symfony 动态生成的匿名函数闭包中执行了 .validate() /twig/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 对象。

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

有什么想法吗？

【问题讨论】：

您所说的“重用”是什么意思...在多个表单上对.validate() 使用相同的调用，或者在同一个表单上多次调用.validate()？

标签： javascript jquery symfony jquery-validate scope

【解决方案1】：

重要提示：如果当您调用.validate() 时表单在DOM 中还不存在，那么您不能调用.validate()，直到它存在。您也不能在同一个表单上多次致电.validate()。

【讨论】：

【解决方案2】：

好吧，我发现了实际的问题，并为这篇文章提供了 2 个答案。

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

感谢大家的帮助。

【讨论】：