1

フォームが送信される直前に、フォームに検証を追加しようとしています。これが私が使用しているものです：

$('#add_upload').submit(function(e){

    var file = $('#realupload_1').val();
    var p_name = $('#p_name').val();
    var p_price = $('#p_price').val();
    var thumb = $('#realupload_2').val();
    var p_desc = $('#p_desc').val();

    if(file == ''){
        e.preventDefault();
        alert('Please select a valid product file');
    }else if(p_name == '' || p_name == 'ebook name'){
        e.preventDefault();
        alert('Please set a valid product name');
    }else if(p_price == '0.00' || Math.ceil(p_price) == 0){
        e.preventDefault();
        alert('Please set a valid price for your product');
    }else if(thumb == ''){
        alert('Please select a valid product image for your product');
        e.preventDefault();
    }else if(p_desc == '' || p_desc == 'Description...'){
        e.preventDefault();
        alert('Please add a description for your product');
    }else{
        //$('#submita').attr("disabled","disabled").val("Please wait....");
    }

});

上記は Firefox と Chrome で完全に動作します。ただし、IE9 で問題が発生しています。else ステートメントに到達しますが、フォームは送信されません。もう一度送信ボタンを押すと、アップロード ファイル フィールドが空でないことを確認するように求められます。値をクリアする方法がわかりません。

上記の検証を削除すると、フォームは正常に送信されます。ただし、最初に検証する必要があります。

私が試したこと：

  1. フォーム ID がすべて一意であることを確認しました
  2. 送信ボタンの ID に別の「送信」という名前を付けました。
  3. $('#add_upload').submit(); を追加しました。他のフィールドで。

上記は違いはありませんでした。

これに 2 時間を無駄にしてしまったので、ここで助けていただければ幸いです。

私の問題はこの質問に似ていますが、まだ決定的な答えはありません。

役立つ場合は、HTML を次に示します。

アップデート

さて、私は問題をこの問題の JS コードに絞り込みました。

$('#file_upload_1').click(function(){

    $('#realupload_1').trigger('click');

});

ご覧のとおり、クリックをトリガーしてファイル ダイアログ ボックスを開きます。IE9 はこれを好まないようです。ファイル入力が自動的にトリガーされた場合にフォームが送信されないというセキュリティ上の問題に違いありません。

誰でもこれを確認できますか？

4

2 に答える 2

3

IE9 のセキュリティでは、入力フィールドのクリックを手動でトリガーすることはできません。

入力をラベルでラップしてみて、代わりにラベルのクリックをトリガーすることができます:)

<label id="labelID" for="inputID">
     <input id="inputID" type="file" />
</label>


$('#labelID').trigger('click');

私は他の答えに同意しますが、あなたが達成しようとしていることを行うためのはるかに良い方法があります.

于 2012-09-26T11:26:04.750 に答える
3

私は Bhuvan Rikka のコメントに賛成票を投じるつもりでしたが、あなたのコードに対する Wirey のいじりを見た後、それは Hindenberg にペンキを塗る必要があることに同意するのと同じようなものだったと思います。

マークアップ、スクリプト、および使いやすさには、注意が必要な問題がいくつかあります。

  • フォームが送信されないように、ID を修正して「false を返す」ようにします。Bhuvan Rikka のコメントを参照してください。e.returnValue = false
  • ID について: ID を意味のあるものにしてください。入力フィールドの名前が、realupload_1、p_name、p_price、realupload_2、p_desc ではなく、eBookFile、eBookName、eBookPrice、Thumbnail、Description に変更されました。
  • フォーム マークアップ: 送信する必要のないフィールドには ID を指定しないでください。同様に、テキスト ラベルを入力テキスト フィールドにしないでください。
  • その一連の elseif で検証を連鎖させることは、ユーザビリティーに関する大きな問題であり、検証エラーを表示するためにアラートを使用することでさらに悪化します。一度にすべてのエラーを表示します。念のため、アラートは使用しないでください。
  • カスタムメイドの検証は素晴らしく、拍手を送ります。jQuery を使用していて、髪の毛を引っ張って車輪を再発明するのに 2 時間を費やしたくない場合は、Validate プラグインを使用してください。

次の変更を加えて、wirey のフィドルを拡張しました。

  • HTML をクリーンアップしました。多くの！
  • ASPNETCDNの Validate プラグインをリンクしました。
  • デフォルト値を処理する「defaultInvalid」メソッドで検証プラグインを拡張しました。
  • フォームは jQuery 検証プラグインを使用するようになりました。さまざまなフォーム要素に「required」および「defaultInvalid」CSS クラスを追加しました。
  • 検証エラーのスタイルを追加しました。

それを試してみてください。最初の無効なフィールドのメッセージを表示するポップアップの代わりに、すべての無効なフィールドを表示できることに注目してください。

これがクリーンアップされた HTML です。

<form id="add_upload" action="/echo/json/" method="post" enctype="multipart/form-data">
    <div class="standard-white-row upload-ebook-row">
        <!-- The label is no longer an input.  Removed ID from label -->
        <div class="fakeupload">Select your ebook file&#8230;</div>
        <input id="eBookFile" type="file" class="realupload required defaultInvalid" />
    </div>
    <div class="standard-white-row">
        <div class="field-ebook-name">
            <input id="eBookName" name="eBookName" type="text" value="eBook Name" class="required defaultInvalid" />
        </div>
        <div class="field-ebook-price">
            <input id="eBookPrice" name="eBookPrice" type="text" value="0.00" class="required defaultInvalid" />
        </div>
    </div>
    <div class="standard-white-row upload-preview-img-row">
        <!-- The label is no longer an input.  Removed ID from label -->
        <div class="fakeupload">Select your thumbnail image&#8230;</div>
        <input id="thumbNail" name="thumbNail" type="file" class="realupload required defaultInvalid" />
    </div>
    <div class="standard-white-row">
        <textarea id="Description" name="Description" cols="" rows="" class="required defaultInvalid">Description&#8230;</textarea>
    </div>
    <div class="standard-white-row standard-white-submit">
        <input id="submitButton" type="submit" value="Add ebook" />
    </div>
    <div class="errorSummary incomplete"></div>
</form>

フォーム検証関数については、まずhttp://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.jsで Validate プラグインにリンクし、次に defaultInvalid メソッドで検証を拡張します。

// Validation extension to invalidate a field if the value is the default.
// Add the 'defaultInvalid' css class to inputs with a default value.
jQuery.validator.addMethod("defaultInvalid", function (value, element) {
    return !(element.value == element.defaultValue);
});

最初の検証方法では、無効なフィールドの横に検証エラーが表示されます。

2 番目の (そしてコメントアウトされた) 検証メソッドは、検証エラーをフォームの下の要約に入れます。

$(document).ready(function () {
    // Invalid fields will receive the 'errorHilite' css class
    // error message will be inline adjacent to the invalid field
    $('#add_upload').validate({
        keyup: false,
        onfocusout: false,
        onclick: false,
        errorElement: "span",
        errorClass: "errorHilite"
    });

    // Invalid fields will receive the 'errorHilite' css class.
    // Error messages are summarized in the element specified by errorLabelContainer.
    /*
    $('#add_upload').validate({
        errorLabelContainer: $(".errorSummary"), 
        keyup: false,
        onfocusout: false,
        onclick: false,
        errorElement: "div",
        errorClass: "errorHilite"
    });
    */

});

その他のオプションについては、Validate API リファレンスをご覧ください。

于 2012-09-22T01:08:54.877 に答える