Question

这是我的剧本：

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

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

Answer 1

你有很多问题。

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

解决方案：使用推送，请勿设置索引。

问题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();
    }

}

Answer 2

尝试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();

Answer 3

不是每次都覆盖HTML，而是开始追加：

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

添加ul个错误可能更合适，但这可以帮助您入门。

Answer 4

要回答这个问题：您为每个错误覆盖#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().
}
...

Answer 5

请注意.html()：

当.html（）用于设置元素的内容时，该元素中的所有内容都将被新内容完全替换。

所以你总是将错误[0]中#errors的内容替换为错误[length-1]，只能随时出现一条错误信息。

我建议使用.append()：

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

Jquery数组。如何一次显示与if语句匹配的数组元素？

5 个答案: