1

複数の入力フィールドを含む数式を含むサイトがあります。これらすべての入力フィールドには、説明を含むプレースホルダー属性があります。しかし、プレースホルダー属性が IE で機能しないことは誰もが知っているので、jQuery Placeholder Enhanced を使用して、プレースホルダーが IE に表示されるようにしています。これは機能します。

しかし同時に、jQuery validate を使用してフォームを検証しています。送信ボタンを押して検証に失敗すると、IE ですべてのプレースホルダーが消えてしまいます。

私の検証は次のようになります。

$(".myForm").validate({
    submitHandler: function (form) {
        $.post("/handlers/CustomHandler.ashx", $(".myForm").serialize(),
            function (data) {
                if (data.result.type == "message") {
                    $(".myForm").parent().html(data.result.data);
                }
                else if (data.result.type == "redirect") {
                    location.href = data.result.data;
                }
            }
        );
     }
});

次のように、invalidHandler オプションを使用して、placeholderEnhanced() 関数を再度起動しようとしました。

$(".myForm").validate({
    submitHandler: function (form) {
        $.post("/handlers/CustomHandler.ashx", $(".myForm").serialize(),
            function (data) {
                if (data.result.type == "message") {
                    $(".myForm").parent().html(data.result.data);
                }
                else if (data.result.type == "redirect") {
                    location.href = data.result.data;
                }
            }
        );
     },
     invalidHandler: function () {
        if (!Modernizr.input.placeholder) {
            $('input[placeholder], textarea[placeholder]').placeholderEnhanced();
        }
     }
});

しかし、残念ながらそれはうまくいきません。この行をコピーして貼り付ける場合：

$('input[placeholder], textarea[placeholder]').placeholderEnhanced();

IE のコンソールに入力し、検証でいくつかのエラーが見つかった後に起動すると、プレースホルダーが再び表示されます。また、アラート（「フォームにエラーがありました」）を入れてみました。フォームの送信ボタンを押すと表示されます。

誰でも何が間違っているのか、そして送信ボタンを押して検証が無効になった後、IEでプレースホルダーが消えないようにする方法についての手がかりを持っています。

前もって感謝します！

/キム

4

1 に答える 1

0

おそらく問題は、jquery.placeholder.js 内の次のコードにあります。

    // Blank on submit -- prevents submitting with unintended value
    this.form && $( this.form ).submit( function() {
      // $input.trigger( 'focus' ); would be problematic
      // because it actually focuses $input, leading
      // to nasty behavior in mobile browsers
      if ( $input.hasClass('placeholder') ) {
        $input
       .val( '' )
        .removeClass( 'placeholder' );
       }
    });

jquery.validate の validate メソッドをトリガーした後、jquery はサブミット処理をこのコードに渡します。このコードをコメントアウトすると、IE でプレースホルダーが消えなくなりました。サーバー側でプレースホルダーが入力されたフィールドを確認します。ただし、送信前に値を空にしたい場合は、送信時にエラーが発生した場合にこのメソッドを呼び出さないようにする必要があります。正確な場所がわかったら、ここにコメントを書きます。

于 2012-08-14T14:59:38.877 に答える