2

検証を使用するフォームがあります。このフォームには、写真をアップロードするためのセクションがあります。最初、このセクションには、次のコードを持つ6つの要素が含まれています。

<img class="photo_upload" src="image/app/photo_upload.jpg">

のクラスのクリックイベントに関数をバインドしましたphoto_upload。この関数は、次のコードを使用して画像を最小限の形式に置き換えます。コードをコピーする

<form onsubmit="startUploadImage();" target="control_target"
enctype="multipart/form-data" method="post" action="index.php">
<input type="hidden" value="add_image" name="service">
<input type="hidden" value="1000000" name="MAX_FILE_SIZE">
<input type="file" size="10" name="photo" id="photo_file_upload"><br>
<button onclick="javascript:cancel_photo_upload();return false;">Cancel</button>
</form>

したがって、基本的に、画像をクリックすると、元の検証済みフォームに新しいフォームがネストされます。この新しいフォームを使用して画像をアップロードすると、次のようなエラーが発生します（3回繰り返されます）。

validator is undefined
http://host.com/path/index.php
Line 286

ここで何が起こっているのですか？私の推測はこれです

  1. イベントバブルを外部フォームに送信する
  2. そのフォームに検証があるため、検証がトリガーされます。
  3. 検証は、それをトリガーするフォームを見つけようとします。
  4. 検証を内部フォームにバインドしていないため、「undefined」を返します

さて、私の評価は正しいですか？そうであろうとなかろうと、どうすればこの問題を解決できますか？

4

2 に答える 2

2

ネストされたフォームはHTMLでは許可されていません。2つの送信ボタンを備えた単一のフォームを使用し、使用されたボタンを認識してそれに応じて分岐するようにサーバー側のフォームハンドラーを設定する必要があります。

于 2010-06-06T12:44:11.190 に答える
2

ページ構造を変更したくない場合は、イベント処理関数にパッチを適用することでこのエラーを修正できますdelegate。

jquery.validate.js v1.15.0、行401〜408：

function delegate( event ) {
    var validator = $.data( this.form, "validator" ),
        eventType = "on" + event.type.replace( /^validate/, "" ),
        settings = validator.settings;
    if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
        settings[ eventType ].call( validator, this, event );
    }
}

私のパッチを当てたバージョン：

function delegate( event ) {
    if (this.form === event.delegateTarget) {
        var validator = $.data( this.form, "validator" ),
            eventType = "on" + event.type.replace( /^validate/, "" ),
            settings = validator.settings;
        if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
            settings[ eventType ].call( validator, this, event );
        }
    }
}

縮小されたバージョン（jquery.validate.jsはuglifyでgruntを使用して配布用にパッケージ化されています）にパッチを適用することは困難ですが、不可能ではありません。function delegate(event)になりfunction b(b)ます。

別のアプローチは、バインド時に使用されるセレクターにパッチを適用することdelegateです。より複雑な修正だと思いますが、ブラウザのパフォーマンスはわずかに向上します。

于 2016-08-02T17:26:28.677 に答える