0

Laravel 4 php フレームワークを使用して Web サイトを開発しています。jQuery Validation プラグインを使用して検証されたフォームを表示するページがあります。

.load()フォーム内のボタンをクリックすると、メソッドを介した jQuery AJAX リクエストでいくつかのフィールドがフォームに追加されます。フィールドをフォームに追加したら、.rules()メソッドを使用してこれらのフィールドの検証ルールを追加します。

ただし、JavaScript が呼び出されると、次のエラーが発生します。

キャッチされていない TypeError: 未定義の jquery.validate.min.js:2 のプロパティ 'form' を読み取れません

テストとして、適切な要素を追加して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()か？

4

1 に答える 1

0

.load() / AJAX を使用してデータを呼び出すと、検証する JS スクリプトには、それらの新しい要素が存在するという手がかりがありません。

ページが最初にロードされたときに検証セットアップが完了していることに注意してください

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

バリデーターが新しい DOM 要素から離れるように、各 new .load() の後にその ready(...) 関数の内容を実行する必要があります。

于 2013-09-10T00:57:27.573 に答える