6

私は次のコードを使用しています：

$().ready(function() {
    $('#state_form').validate({
        rules: {
            state: "required"
        },
        messages: {
            state: 
            {
                required: "The State is required!"
            }
        },          
        errorPlacement: function(error, element) {
            alert(error.html());
        }
    });
});

ただし、ユーザーがフォームを送信すると、エラーのあるポップアップが表示されます。正解です。次に、ユーザーが選択ボックスの「状態」をクリックすると、エラーのあるポップアップがまだ表示されます (正しい値を選択することはできません)。実際の例は、janzitniak.info/temp/test.phpにあります。

これは受け入れられません。この問題を解決するにはどうすればよいですか?

JQuery form validation with alert popup - alert still being shown with a valid submit で説明されている解決策は役に立ちませんでした。おそらく私はそれを正しく理解していませんでした。

4

2 に答える 2

9

onclick: falseこのオプションを使用して、状態が選択される前にエラーがトリガーされないようにします。また、とにかく HTML を使用する必要がないため、.text()代わりに使用するだけで済みます。.html()alert()

$(document).ready(function () {
    $('#state_form').validate({
        onclick: false, // <-- add this option
        rules: {
            state: "required"
        },
        messages: {
            state: {
                required: "The State is required!"
            }
        },
        errorPlacement: function (error, element) {
            alert(error.text());
        }
    });
});

デモ: http://jsfiddle.net/U6N3R/

注意: このコードを Safari で使用しないでください。無限ループに陥ります。「OK」ボタンをクリックした後alert()、Safariがコールバック関数をもう一度起動するようです。errorPlacement

よりモダンなユーザー エクスペリエンスのために、代わりに jQuery モーダルまたはツールチップ プラグインをお勧めします。

例としてこの回答を参照してください: https://stackoverflow.com/a/14741689/594235

于 2013-02-10T19:22:48.060 に答える
0

無限ループを停止するためのいくつかのマイナーな修正。その他のオプションとして keyup: false を使用します。

$(document).ready(function () {
$('#state_form').validate({
    onclick: false, 
    onkeyup: false,
    rules: {
        state: "required"
    },
    messages: {
        state: {
            required: "The State is required!"
        }
    },
    errorPlacement: function (error, element) {
        alert(error.text());
    }
});
});
于 2016-12-24T17:33:42.027 に答える