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

Question

I am developing a website using the Laravel 4 php framework, and I have a page which displays a form that is validated using the jQuery Validation plugin.

Clicking a button in the form adds several fields to the form with a jQuery AJAX request via the .load() method. Once I've added the fields to the form, I want to add validation rules for these fields, which I do using the .rules() method.

However, when my javascript is called, I get the following error:

Uncaught TypeError: Cannot read property 'form' of undefined jquery.validate.min.js:2

As a test, I appended an element to the appropriate div and called .rules() on it, and it validated as expected, so it seems that for some reason I'm getting an error because my form elements are being generated using php and then added to the page using .load() .

Here's my code:

The page in question:

<?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(); ?>
...

The javascript that handles this is:

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;
}

And the partial view located at /order/enterLabAddress is:

<?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; ?>

Can anyone help? Why am I getting this error using .load() ? and not .append() ?

Answer 1

When you call in data using .load() / AJAX, the validating JS script has no clue that those new elements exist.

Notice that your validating setup is done when the page initially loads

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

You need to run the contents of that ready(...) function after each new .load() so the validator becomes away of new DOM elements.