将 jQuery 验证规则添加到动态生成的表单元素时出错

Posted 2023-03-14

【中文标题】将 jQuery 验证规则添加到动态生成的表单元素时出错

【英文标题】：Error adding jQuery Validation rule to dynamically generated form element

【发布时间】：2013-09-13 14:09:39

【问题描述】：

我正在使用 Laravel 4 php 框架开发一个网站，我有一个页面显示使用 jQuery Validation 插件验证的表单。

单击表单中的按钮会通过.load() 方法使用jQuery AJAX 请求将多个字段添加到表单中。将字段添加到表单后，我想为这些字段添加验证规则，我使用 .rules() 方法来完成。

但是，当我的 javascript 被调用时，我收到以下错误：

未捕获的类型错误：无法读取未定义 jquery.validate.min.js:2 的属性“表单”

作为测试，我将一个元素附加到适当的 div 并在其上调用 .rules()，并按预期进行验证，所以似乎由于某种原因我收到错误，因为我的表单元素正在使用php生成，然后使用.load()添加到页面。

这是我的代码：

有问题的页面：

<?php echo Form::open(array('id' => 'researcher-info-form')) ?>
<?php foreach($researcher_template as $slug => $title): ?>
    <tr>
        <td></td>
        <td>
            <?php echo Form::label('researcher_' . $slug, $title); ?>
            <?php echo Form::text('researcher_' . $slug); ?>
        </td>
        <td class="validation-error-message"></td>
        </tr>
<?php endforeach; ?>
...
<div id="billing-address-wrapper">
    <?php // a jQuery event loads form fields into this div dynamically. ?>
</div>
...
<?php Form::close(); ?>
...

处理这个的javascript是：

jQuery(document).ready(function($) 
    $("form").validate(
        submitHandler: submitSeqRequest,
        rules: 
        researcher_name: "required",
        researcher_email: 
            required: true,
            email: true
            ,
        pi_name: "required",
        template: "required",
        primer: "required",
        dna_type: "required",
        bases_needed: "required"
        ,
        errorPlacement: function(error, element) 
            error.appendTo( element.parent("td").next("td") );
        
    );
    addLabAddress();
);

function addLabAddress() 
    $('#add-my-group').click( function() 
        $('#billing-address-wrapper').load("/order/enterLabAddress");
        $('#group_name').rules("add", 
            required: true
        )
    );
    return false;

而位于/order/enterLabAddress的部分视图为：

<?php $billing_template = (new Lab)->billing_template; ?>
<?php foreach($billing_template as $slug => $title): ?>
    <div>
        <?php echo Form::label($slug, $title); ?>
        <?php echo Form::text($slug);   ?>
    </div>
<?php endforeach; ?>

有人可以帮忙吗？为什么我在使用 .load() 时会收到此错误？而不是.append()？

【问题讨论】：

似乎由于某种原因，动态添加到页面的表单元素未被识别为表单的一部分......当我使用 $(this).ajaxSubmit 提交表单时，表单的其余部分提交没有动态部分。 <input> 表单元素嵌套在 DOM 中的 <form></form> 标签内，那么为什么它们似乎没有附加到任何表单？

【参考方案1】：

当您使用 .load() / AJAX 调用数据时，验证 JS 脚本不知道这些新元素是否存在。

请注意，您的验证设置是在页面最初加载时完成的

jQuery(document).ready(function($) 

您需要在每个新的 .load() 之后运行该 ready(...) 函数的内容，以便验证器远离新的 DOM 元素。

【讨论】：

我认为在将元素添加到 DOM 之后调用 .rules() 方法（参见 js 中的 addLabAddress 函数）会更新验证器。为什么这不起作用？