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

Question

我正在使用 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()？

Answer 1

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

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

jQuery(document).ready(function($) {

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