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>

我想显示一次发生的所有错误，但现在它只显示一条错误消息。提前感谢您的回答。

4

5 回答 5

5

你有多个问题。

问题 1：首先，如果没有错误，索引零会发生什么？它是未定义的。

解决方法：使用push，不要设置索引。

问题 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

回答这个问题：您为每个错误覆盖#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 回答
0

请注意.html()：

当 .html() 用于设置元素的内容时，该元素中的任何内容都会被新内容完全替换。

所以你总是将#errors的内容从error[0]替换为error[length-1]，在任何时候都只有一条错误消息。

我建议使用.append()：

.append() 方法插入指定的内容作为 jQuery 集合中每个元素的最后一个子元素

于 2013-08-27T14:14:05.543 回答