在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;
        }
    });

在每条消息中添加完美的分隔以区分它。