CODEWITHSUNDEEP
javascriptjqueryarrays
user2699508
user2699508

Reputation: 63

Jquery Array. How to display array elements that match if statements at once?

This is my script:

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

I wanna to display all errors which occurs at once, but right now it just display one error message. Thanks in advance for your answers.

Upvotes: 0

Views: 145

Answers (5)

王奕然
王奕然

Reputation: 4049

note that .html():

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content.

so you always replace the content of #errors from error[0] to error[length-1],only with one error message at any time.

i suggest use .append():

The .append() method inserts the specified content as the last child of each element in the jQuery collection

Upvotes: 0

11684
11684

Reputation: 7507

To answer the question: you overwrite the HTML of the #errors element for every error, so it ends up displaying only the last error. You need to append every error message to the previous one.

You could do as tymeJV suggests, but that requires to fetch the HTML of that div every time the loop runs. jQuery already provides append functionality out of the box, so why not use that? The jQuery team put a lot of effort into it.

...
$('#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().
}
...

Upvotes: 0

epascarello
epascarello

Reputation: 207511

You have multiple problems.

Problem 1: First what happens to index zero if there is no error? It is undefined.

Solution: Use push, do not set an index.

Problem 2: Second, you are just setting the innerHTML in a loop so you keep overriding it.

Solution: Join the array

Problem 3: You val() checks will not work,

Solution: You need to check the length

$('.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();
    }

}

Upvotes: 5

Arun P Johny
Arun P Johny

Reputation: 388316

Try error.join('') instead of iterating and updating the element

$('.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(''));

});

If you want to use the looping then append the html instead of overriding it

var $errors = $('#errors').empty()
for (var i = 0; i < error.length; i = i + 1) {
    $errors.append(error[i]);
}
$errors.show();

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

Rather than over-write your HTML each time, start appending:

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

Appending a ul of errors may be more appropriate, but this will get you started.

Upvotes: 0

Related Questions