6

jQuery Validation プラグインを使用して、サイトのフォームを検証しています。

http://docs.jquery.com/Plugins/Validation

placeholder=""また、次のコードを使用して、HTML5属性をサポートしていないブラウザーにプレースホルダー サポートを提供しています。

// To detect native support for the HTML5 placeholder attribute
var fakeInput = document.createElement("input"),
    placeHolderSupport = ("placeholder" in fakeInput);

// Applies placeholder attribute behavior in web browsers that don't support it
if (!placeHolderSupport) {

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '') {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() { //line 20
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}

フォームを送信すると、次のことが起こります。

placeholderこの属性をサポートするブラウザーでは、validate()関数が起動し、すべてが想定どおりに機能します。

この属性をサポートしていないブラウザーではplaceholder、20 ～ 25 行目ですべての「プレースホルダー」がクリアされ、validate()関数が起動します。エラーがない場合、ページは送信され、すべてが想定どおりに機能します。

サポートされていないブラウザーでは、エラーが発生した場合、通常どおり適切なフィールドが適用されますが、特定のフィールドでイベントが発生するclass="error"までプレースホルダー テキストは返されません。blur()これにより、これらのフィールドは空白のままになります。ラベルがない (属性のみ) ため、ユーザーは、イベントが発生placeholderするまで、各空のフィールドに何が含まれているかを推測する必要があります。blur()

サポートされていないブラウザーが抱えるもう 1 つの問題は、プレースホルダーの修正によってvalue属性が変更されてプレースホルダーが表示されるため、必須としてマークされたフィールドが失敗するはずのときに検証に合格することです。

Validation プラグインをプレースホルダー サポート コードで使用する簡単な方法はないようです。

プレースホルダー サポート コードを変更するか、submitHandler: {}関数にパラメーターとして関数を追加しvalidate()て、サポートされていないブラウザーでこれを機能させることを検討しています。

4

4 に答える 4

7

同様の問題に遭遇しました。あなたはあなたのものを働かせましたか？ノートを比較したい。

FWIW、これが私がしたことです：

jsfiddle デモはこちら.

入力プレースホルダーを jQuery サポート オブジェクトに追加します。

$.support.placeholder = (function() {
    var i = document.createElement( 'input' );
    return 'placeholder' in i;
})();

プレースホルダ チェーン:

$('input')
    .addClass('hint')
    .val( function() {
        if ( !$.support.placeholder ) {
            return $(this).attr('placeholder');
        }
    })
    .bind({
        focus: function() {
            var $this = $(this);
            $this.removeClass('hint');
            if ( $this.val() === $this.attr('placeholder') ) {
                $this.val('');
            }
        },
        blur: function() {
            var $this = $(this),

                // Trim whitespace if only space characters are entered,
                // which breaks the placeholders.
                val = $.trim( $this.val() ),
                ph = $this.attr('placeholder');

            if ( val === ph || val === '' ) {
                $this.addClass('hint').val('');
                if ( !$.support.placeholder ) {
                    $this.val(ph);
                }
            }
        }
    });

新しい検証ルールを追加する

addMethod ドキュメント

$.validator.addMethod('notPlaceholder', function(val, el) {
    return this.optional(el) || ( val !== $(el).attr('placeholder') );
}, $.validator.messages.required);

検証ルール オブジェクトに新しいメソッドを含める

$('form').validate({
    rules: {
        name: {
            required: true,
            notPlaceholder: true
        },
        email: {
            required: true,
            notPlaceholder: true,
            email: true
        }
    }
});
于 2011-07-09T12:59:34.780 に答える
2

これを jquery.validate.js のrequired関数 (900 行目) に追加するのが最善だと思います。

required: function(value, element, param) {

        // Our change
        if (element.value == element.defaultValue) {
            return false;
        }
        // End our change
于 2012-01-09T13:16:44.413 に答える
1

これを送信機能にバインドすることでこれを解決できます（jQuery検証または手動のいずれかを使用）

 if(element.val() == text){
      element.val('');
 }
于 2011-05-10T17:07:42.870 に答える
1

プレースホルダープラグインの更新で問題が解決しました:)

于 2012-08-03T11:08:14.967 に答える