0

これは私のスクリプトです：

 <script>
 $('.change_password_button').click(function() {
    var error = [];
    if (!$('.password').val()) {
        error[0] = "Current password field is empty.";
    }
    if (!$('.new_password').val()) {
        error[1] = "New password field is empty.";
    }
    if (!$('.confirm_password').val()) {
        error[2] = "Confirm password field is empty.";
    }
    if ($('.new_password').val() != $('.confirm_password').val()) {
        error[3] = "Your new password and confirm password fields do not match.";
    }
    for (var i = 0; i < error.length; i = i + 1) {
        $('#errors').show();
        $('#errors').html(error[i]);
    }
});
 </script>

一度に発生したすべてのエラーを表示したいのですが、今は 1 つのエラー メッセージしか表示されません。ご回答ありがとうございます。

4

5 に答える 5

5

複数の問題があります。

問題 1:まず、エラーがない場合、インデックス 0 はどうなりますか? 未定義です。

解決策:プッシュを使用し、インデックスを設定しないでください。

問題 2: 2 番目に、innerHTML をループで設定しているだけなので、オーバーライドし続けます。

解決策:アレイに参加する

問題 3: val() チェックが機能しない

解決策：長さを確認する必要があります

$('.change_password_button').click(function(){

    var error = [];  

    if (!$('.password').val().length) {   
        error.push("Current password field is empty.");   
    };

    if (!$('.new_password').val().length) { 
        error.push("New password field is empty.");   
    };

    if (!$('.confirm_password').val().length) { 
        error.push("Confirm password field is empty.");   
    };

    if ($('.new_password').val() != $('.confirm_password').val()) { 
        error.push("Your new password and confirm password fields do not match.");   
    };

    if(error.length) {
        $('#errors').html( error.join("<br/>").show();
    } else {
        $('#errors').hide();
    }

}
于 2013-08-27T13:22:40.650 に答える
1

error.join('')要素を反復して更新する代わりに試してください

$('.change_password_button').click(function () {
    var error = [];

    if (!$('.password').val()) {
        error.push("Current password field is empty.");
    };

    if (!$('.new_password').val()) {
        error.push("New password field is empty.");
    };

    if (!$('.confirm_password').val()) {
        error.push("Confirm password field is empty.");
    };

    if ($('.new_password').val() != $('.confirm_password').val()) {
        error.push("Your new password and confirm password fields do not match.");
    };

    $('#errors').show();
    $('#errors').html(error.join(''));

});

ループを使用する場合は、html をオーバーライドする代わりに追加します。

var $errors = $('#errors').empty()
for (var i = 0; i < error.length; i = i + 1) {
    $errors.append(error[i]);
}
$errors.show();
于 2013-08-27T13:22:39.610 に答える
0

毎回 HTML を上書きするのではなく、追加を開始します。

var current = $('#errors').html();
$('#errors').html( current + " " + error[ i ] );

ulエラーを追加する方が適切かもしれませんが、これで作業を開始できます。

于 2013-08-27T13:22:29.720 に答える
0

.html()に注意してください:

.html() を使用して要素のコンテンツを設定すると、その要素に含まれていたすべてのコンテンツが新しいコンテンツに完全に置き換えられます。

そのため、#errors の内容を error[0] から error[length-1] に常に置き換え、いつでも 1 つのエラー メッセージだけに置き換えます。

.append()を使用することをお勧めします:

.append() メソッドは、指定されたコンテンツを jQuery コレクション内の各要素の最後の子として挿入します

于 2013-08-27T14:14:05.543 に答える
0

質問に答えるには、#errorsエラーごとに要素の HTML を上書きするため、最後のエラーのみが表示されることになります。すべてのエラー メッセージを前のメッセージに追加する必要があります。

tymeJV が示唆するように行うこともできますが、ループが実行されるたびにその div の HTML を取得する必要があります。jQuery は追加設定なしで既に追加機能を提供しているので、それを使用してみませんか? jQuery チームはこれに多大な労力を注ぎました。

...
$('#errors').show(); // Notice I moved this statement. Once it is shown, you do not need to show it again.
for (var i = 0; i < error.length; i = i + 1) {
    $('#errors').append(error[i]); // .append() instead of .html().
}
...
于 2013-08-27T13:32:36.090 に答える