1

ここで状況に遭遇しています。

検証メッセージを表示するために FORM 内の DOM を更新できないように、デザインに適合するフォームがあります。

したがって、次のコードを例として、カスタム jQuery Validation Plugin DOM メッセージをデフォルトのブラウザー アラートに置き換える方法を考えています。

$("form").validate({
    rules:{
        myName:{
            required: true, minlength: 2
        },
        myEmail:{
            required: true, email: true
        },
        myMessage:{
            required: true, minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type you name",
            minLength: "Your name must be at least 2 characters long"
        },
        myEmail:{
            required: "Type you e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minLength: Your message must be at least 2 characters long"
        }
    }
});

前もって感謝します！

4

2 に答える 2

3
  • 最後のカスタム メッセージには、開始引用符 がありませんでした"。
  • カスタムには、ルールの値に自動的に置き換えられるmessagesパラメーター プレースホルダー が含まれている必要があります。{0}
  • minlengthまた、大文字を使用して、カスタムmessagesオプション内のルールのスペルを間違えましたL。

代わりに次のコードを試してください。

$("form").validate({
    rules:{
        myName:{
            required: true,
            minlength: 2
        },
        myEmail:{
            required: true,
            email: true
        },
        myMessage:{
            required: true,
            minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type your name",
            minlength: "Your name must be at least {0} characters long"
        },
        myEmail:{
            required: "Type your e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minlength: "Your message must be at least {0} characters long"
        }
    }
});

デモ: http://jsfiddle.net/3JTNh/

OP の引用: 「カスタム jQuery Validation Plugin DOM メッセージをデフォルトのブラウザー アラートに置き換える方法を知りたいです」

あなたの質問は非常に不明確ですが、メッセージを動的に変更する方法は、rules('add')メソッドを使用してルールを動的に変更し、変更するメッセージのみを指定することです...作業デモ: http://jsfiddle.net/ vkF9r/

* removed *

編集：

コメントによると、OP は元々 、このようなコールバック関数alert()を使用して実行できるJavaScript を求めていました。はオブジェクトであるerrorPlacementため、そのメッセージのみを使用します。errorerror.text()

    onkeyup: false,
    errorPlacement: function (error, element) {
        alert(error.text());
    },

キーストロークごとに繰り返されるアラートを無効にするために、に 設定onkeyupすることをお勧めします。Safari を使用している場合は、このデモを試さないでください。そうしないと、無限ループに陥ります (この場合の使用の欠点の 1 つ) http://jsfiddle.net/kxwYd/falsealert()

alert()ところで: Web サイトのデザインで時代遅れの JavaScript を使用することはお勧めしません。

良い/推奨:

よりモダンなユーザー エクスペリエンスを実現するには、代わりに、これを jQuery モーダルまたはTooltipsterなどのツールチップ プラグインと統合する必要があります。

作業例: http://jsfiddle.net/SfanE/

次のコードは、私の他の回答からのものです...

まず、エラーを表示するすべての特定の要素でTooltipster プラグインを (任意のオプションで)初期化します。form

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false, // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

});

次に、Validate プラグインに組み込まれているおよびコールバック関数とともにTooltipster の高度なオプションを使用して、次のようにツールヒントを自動的に表示および非表示にします。success:errorPlacement:

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).data('tooltipsterContent', $(error).text());
            $(element).data('plugin_tooltipster').showTooltip();
        },
        success: function (label, element) {
            $(element).data('plugin_tooltipster').hideTooltip();
        }
    });

});
于 2013-02-10T16:16:41.370 に答える
1

Sparkyが提案したことを基に、ツールチッププラグインを含めたくない場合は、jQueryUIと少しのCSSを使用してその動作をかなり厳密にエミュレートできます。

CSS：

label.error {
    background-color:white;
    color:red;
    position:absolute;
    border: 1px black solid;
    padding: 10px;
    box-shadow: 5px 5px 2px #888;
    z-index:1;
}

jQuery：

$('#myform').validate({
    errorPlacement: function (error, element) {
        error.insertAfter(element).position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });

    },
   //the rest of your validate options
});

ここでの例：http：//jsfiddle.net/SfanE/1/

于 2013-02-12T16:46:13.673 に答える