在jQuery中的一條消息中顯示多個警報

Question

我的aspx表單上有多個必填字段控件。

現在，如果沒有填寫或檢查任何內容，我想在單擊按鈕時顯示驗證消息。

我希望它在JQuery中的一條消息上。

這是我的JQuery代碼：-

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

試試下面的代碼

  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

而不是一直使用警報，而是將消息保存到變量中。 完成所有測試后，然后警告該消息。

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

使用下面的小提琴[JSFiddle] [1]，這基本上會將所有錯誤消息推送到一個數組中並可以顯示結果。 如果這對您有用，請更新，因為我不知道加價

Answer 4

您可以做的一個簡單技巧

只需將字符串變量用於郵件追加和計數器。

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

只需更新計數器和隱含檢查，如果check> 0 show message（alert）

這將使你受益兩件事

1. 用戶不需要每次單擊並獲得警報。.不需要返回false.user必須立即知道表單中存在哪些錯誤。

2. 其次，代碼是簡單/簡單邏輯。

Answer 5

嘗試這個。

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

在每條消息中添加完美的分隔以區分它。