How do I show all items in array in alert box?

Question

Here's a snippet of my code:

onclick : function(){           // default button function 
                           form = new Object(); 
                           field = new Object();
                           form.vald = 0;
                           field.first = $('input[name$="sf_name"]');
                           field.last = $('input[name$="sf_last"]');
                           field.title = $('input[name$="sf_title"]');
                           field.company = $('input[name$="sf_company"]');
                           field.email = $('input[name$="sf_email"]');
                           field.phone = $('input[name$="sf_phone"]');
                           field.key = $('input[name$="sf_key"]');
                           fields = new Array();

                           if (!field.first.val()) {

                               fields.push("First Name");

                           }
                           if (!field.last.val()) {
                               fields.push("Last Name")

                           }
                           if (!field.title.val()) {
                               fields.push("Title")

                           }
                           if (!field.company.val()) {
                               fields.push("Company")

                           }
                           if (!field.email.val()) {
                               fields.push("Email")

                           }
                           if (!field.phone.val()) {
                               fields.push("Phone")

                           }
                           console.log(fields);
                           if (form.valid == 0) {
                               window.location = "<?php bloginfo('url'); ?>/download?viewkey="+field.key.val();
                           } else {
                               alert('Please correct the following fields before continuing: ');
                               //$('#form_487940 input').css("box-shadow", "inset #BBB 0px 0px 5px");
                           }

As you can see any invalid fields gets pushed into an array, I need to show all the invalid fields in an alert box after 'Please correct the following fields before continuing:'.

Any help would be appreciated, maybe I could achieve the same result doing it a different way.

Answer 1

use array.join like so:

alert('Please correct the following fields before continuing: \n' 
    + fields.join(", "));​​​​

would output a comma-separated list like

Please correct the following fields before continuing:

First Name, Last Name, Company

Answer 2

试试下面，

alert('Please correct the following fields before continuing: ' + fields.join());

Answer 3

alert('Please correct the following fields before continuing: ' + fields.join(", "));

Answer 4

you can use join method of javascript array, but verify your code to be better ordered:

onclick: function() { // default button function 
    var
        form = {
           vald: true
        },
        field = {
            'first': $('input[name$="sf_name"]'),
            'last': $('input[name$="sf_last"]'),
            'title': $('input[name$="sf_title"]'),
            'company': $('input[name$="sf_company"]'),
            'email': $('input[name$="sf_email"]'),
            'phone': $('input[name$="sf_phone"]'),
            'key': $('input[name$="sf_key"]')
        },
        fields = [];

    var addValue = function(el, value) {
        if (!el.val()) {
            form.valid = false;
            fields.push(value);
        }
    };

    addValue(field.first, "First Name");
    addValue(field.last, "Last Name");
    addValue(field.title, "Title");
    addValue(field.company, "Company");
    addValue(field.email, "Email");
    addValue(field.phone, "Phone");

    if (form.valid) {
        //not recommended to do this, for example could be an input value
        window.location = "<?php bloginfo('url'); ?>/download?viewkey=" + field.key.val();
        //recommended  
        //window.location = $('#url').val() + '/download?viewkey=' + field.key.val();

        return;
    }

    var fieldsString = field.join(" \n ");
    alert("Please correct the following fields before continuing: \n" + fieldsString);

}

Or:

onclick: function() { // default button function 
    var
        field = {
            'First Name': $('input[name$="sf_name"]'),
            'Last Name': $('input[name$="sf_last"]'),
            'Title': $('input[name$="sf_title"]'),
            'Company': $('input[name$="sf_company"]'),
            'Email': $('input[name$="sf_email"]'),
            'Phone': $('input[name$="sf_phone"]'),
            'key': $('input[name$="sf_key"]')
        },
        fields = [];

    $.each(field, function(i, v) {
        if (i != 'key' && !v.val()) {
            fields.push(i);
        }
    };

    if (fields.length == 0) {
        window.location = $('#url').val() + '/download?viewkey=' + field.key.val();
        return;
    }

    var fieldsString = field.join(" \n ");
    alert("Please correct the following fields before continuing: \n" + fieldsString);
}

Answer 5

Try this

var field = ['Name Invalid', 'Email Invalid' , 'Phone Invalid' 
              , 'Address Invalid'];​​​​​
var alertStr = '';
$.each(field , function(i) {
    alertStr += field[i] + '\n'
 })

 alert(alertStr)   

Check FIDDLE

​ This will make sure each error is in a separate line

If that's the case you can also use

fields.join('\n');