show multiple alert in one message in jquery

Question

I have multiple required field controls on my aspx form.

Now what I want is to show the validation message on button click if anything is not filled or checked.

I want it on one message in JQuery.

Here is my JQuery code:-

$(document).ready(function () {
        $('#btnSave').click(function (e) {
            if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
                e.preventDefault();
            }
        });
        function validateTitle() {
            if ($("#ddlTitle").val() > "0") {
                if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
                    alert("Please enter the text in other title");
                    return false;
                }
                return true;
            } else {
                alert('Please select the title');
                return false;
            }
        }
        function validatePrefix() {
            if ($("#ddlPrefix").val() > "0") {
                if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
                    alert("Please enter the text in other prefix");
                    return false;
                }
                return true;
            } else {
                alert('Please select the prefix');
                return false;
            }
        }
        function validateTextBoxes() {
            if ($("#txtFirstName").val() === "") {
                alert('First name is required');
                return false;
            }
            if ($("#txtMiddleName").val() === "") {
                alert('Middle name is required');
                return false;
            }
            if ($("#txtLastName").val() === "") {
                alert('Last name is required');
                return false;
            }
            if ($("#txtFatherName").val() === "") {
                alert('Father name is required');
                return false;
            }
            if ($("#txtCurrentCompany").val() === "") {
                alert('Current company is required');
                return false;
            }
            if ($("#txtDateofJoin").val() === "") {
                alert('Date is required');
                return false;
            }
            if ($("#txtCurrentExp").val() === "") {
                alert('Current Experience is required');
                return false;
            }
            return true;
        }
    });

Answer 1

Try below code

  var ErrArr = [];
  $(document).ready(function () {
    $('#btnSave').click(function (e) {
         e.preventDefault();
         validateTitle();
         validatePrefix();
         validateTextBoxes();
           if(ErrArr.length > 0) {  
             alert(ErrArr.join("\n"));
             ErrArr = [];
             return false;
           }
    });

    function validateTitle() {
        if ($("#ddlTitle").val() > "0") {
            if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
                    ErrArr.push("Please enter the text in other title");

            }

        } else {
             ErrArr.push('Please select the title');

        }           

    }
    function validatePrefix() {
        if ($("#ddlPrefix").val() > "0") {
            if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
                ErrArr.push("Please enter the text in other prefix");
            }         


        } else {
           ErrArr.push('Please select the prefix');

        }        

    }
    function validateTextBoxes() {
        if ($("#txtFirstName").val() === "") {
           ErrArr.push('First name is required');

        }
        if ($("#txtMiddleName").val() === "") {
            ErrArr.push('Middle name is required');

        }
        if ($("#txtLastName").val() === "") {
            ErrArr.push('Last name is required');

        }
        if ($("#txtFatherName").val() === "") {
           ErrArr.push('Father name is required');

        }
        if ($("#txtCurrentCompany").val() === "") {
            ErrArr.push('Current company is required');

        }
        if ($("#txtDateofJoin").val() === "") {
            ErrArr.push('Date is required');

        }
        if ($("#txtCurrentExp").val() === "") {
           ErrArr.push('Current Experience is required');

        }           
    }
});

Answer 2

Instead of using alert all the time, save the message to a variable instead. Then alert that message after all tests are done.

$(document).ready(function () {
        var message = "";

        $('#btnSave').click(function (e) {
            message = "";
            if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {
                e.preventDefault();
                alert(message);
            }
        });
        function validateTitle() {
            if ($("#ddlTitle").val() > "0") {
                if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
                    message += "Please enter the text in other title\n";
                    return false;
                }
                return true;
            } else {
                message += 'Please select the title\n';
                return false;
            }
        }

        ....
});

Answer 3

Use the following fiddle [JSFiddle][1] , this will basically push all the error messages into an array and can show the results. Please update if this works for you as i am not aware of markup

Answer 4

Just a simple trick you can do

just use a string variable for messages appending and counter.

$(document).ready(function () {
var Messages;
var counter=0;
    $('#btnSave').click(function (e) {
        validateTitle();
        validatePrefix();
        validateTextBoxes();
            if(counter > 0)
            {
                alert(Messages);
                e.preventDefault();
                counter=0;
            }
    });
    function validateTitle() {
        debugger;
        if ($("#ddlTitle").val() > "0") {
            if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
                Messages +=  "Please enter the text in other title";
                Messages += "\n";
                counter ++;
            }
        } else {
            Messages +=  'Please select the title';
            Messages += "\n";
            counter ++;
        }
    }
    function validatePrefix() {
        debugger;
        if ($("#ddlPrefix").val() > "0") {
            if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
                Messages +=  "Please enter the text in other prefix";
                Messages += "\n";
                counter ++;
            }
        } else {
            Messages +=  'Please select the prefix';
            Messages += "\n";
            counter ++;
        }
    }
    function validateTextBoxes() {
        debugger;
        if ($("#txtFirstName").val() === "") {
            Messages +=  'First name is required';
            Messages += "\n";
            counter ++;
        }
        if ($("#txtMiddleName").val() === "") {
            Messages +=  'Middle name is required';
            Messages += "\n";
            counter ++;
        }
        if ($("#txtLastName").val() === "") {
            Messages +=  'Last name is required';
            Messages += "\n";
            counter ++;
        }
        if ($("#txtFatherName").val() === "") {
            Messages +=  'Father name is required';
            Messages += "\n";
            counter ++;
        }
        if ($("#txtCurrentCompany").val() === "") {
            Messages +=  'Current company is required';
            Messages += "\n";
            counter ++;
        }
        if ($("#txtDateofJoin").val() === "") {
            Messages +=  'Date is required';
            Messages += "\n";
            counter ++;
        }
        if ($("#txtCurrentExp").val() === "") {
            Messages +=  'Current Experience is required';
            Messages += "\n";
            counter ++;
        }
    }
});

Just update counter and impliment check if check > 0 show message (alert)

it will benefit you two things

1. User dont need to click each time and get alert.. dont need to return false.user Must know at once what erors are in form.

2. Secondly code is simple/Simple logic.

Answer 5

Try this.

    $(document).ready(function () {
  var Errors = [];
        $('#btnSave').click(function (e) {
            if (!validateTitle() || !validatePrefix() || !validateTextBoxes()) {

                if(Errors.length > 0) {
                    alert(Errors.join("\n"));
                } 
                 e.preventDefault();

            }
        });

        function validateTitle() {
            if ($("#ddlTitle").val() > "0") {
                if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
                    Errors.push("Please enter the text in other title");

                }
                return true;
            } else {
                Errors.push('Please select the title');

            }
        }
        function validatePrefix() {
            if ($("#ddlPrefix").val() > "0") {
                if ($("#ddlPrefix").val() == "1110" && $("#txtPrefix").val() === "") {
                    Errors.push("Please enter the text in other prefix");

                }
                return true;
            } else {
               Errors.push('Please select the prefix');

            }
        }
        function validateTextBoxes() {
            if ($("#txtFirstName").val() === "") {
               Errors.push('First name is required');

            }
            if ($("#txtMiddleName").val() === "") {
                Errors.push('Middle name is required');

            }
            if ($("#txtLastName").val() === "") {
                Errors.push('Last name is required');

            }
            if ($("#txtFatherName").val() === "") {
               Errors.push('Father name is required');

            }
            if ($("#txtCurrentCompany").val() === "") {
                Errors.push('Current company is required');

            }
            if ($("#txtDateofJoin").val() === "") {
                Errors.push('Date is required');

            }
            if ($("#txtCurrentExp").val() === "") {
               Errors.push('Current Experience is required');

            }

            return true;
        }
    });

Add perfect separation in each message to differentiate it.