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

时间:2013-09-10 00:53:01

标签: php jquery validation laravel laravel-4

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

单击表单中的按钮,通过.load()方法向表单添加几个字段,并带有jQuery AJAX请求。在我将字段添加到表单后,我想为这些字段添加验证规则,我使用.rules()方法。

然而,当我的javascript被调用时,我收到以下错误:

  

未捕获的TypeError:无法读取未定义的jquery.validate.min.js的属性'form':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()

1 个答案:

答案 0 :(得分:0)

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

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

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

你需要在每个新的.load()之后运行那个ready(...)函数的内容,这样验证器就会离开新的DOM元素。