在 Jquery 验证后 OnClick 不起作用答案

【问题标题】：OnClick doesn't work after Jquery validations在 Jquery 验证后 OnClick 不起作用
【发布时间】：2015-07-29 12:44:02
【问题描述】：

我已经通过 jquery 进行了验证，在按钮单击时效果很好。但是一旦我将所有数据填入页面，我的onClick 就不会触发。我不知道为什么。请提出建议。

这是我的 jquery 代码：-

var ErrArr = [];
    $(document).ready(function () {
        $('#btnSave').click(function (e) {
            e.preventDefault();
            validateTitle();
            validateddl();
            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 validateTextBoxes() {
            if ($("#txt_emp_fname").val() === "") {
                ErrArr.push('First name is required');
            }
            if ($("#txt_emp_mname").val() === "") {
                ErrArr.push('Middle name is required');
            }
            if ($("#txt_emp_lname").val() === "") {
                ErrArr.push('Last name is required');
            }

            if ($("#txtDateofJoin").val() === "") {
                ErrArr.push('Date of joining is required');
            }
            if ($("#txtReligion").val() === "") {
                ErrArr.push('Religion is required');
            }
            if ($("#txtBloodGroup").val() === "") {
                ErrArr.push('Blood group is required');
            }
            if ($("#txtPersonalEmail").val() === "") {
                ErrArr.push('Email Id is required');
            }
            if ($("#txtDtOfBirth").val() === "") {
                ErrArr.push('Date of birth is required');
            }
            if ($("#txtAt").val() === "") {
                ErrArr.push('Place of birth is required');
            }
            if ($("#txtTaluka").val() === "") {
                ErrArr.push('Taluka is required');
            }
            if ($("#txtPostOffice").val() === "") {
                ErrArr.push('Post office is required');
            }
            if ($("#txtDistrict").val() === "") {
                ErrArr.push('District is required');
            }
            if ($("#txtStatePersonal").val() === "") {
                ErrArr.push('State is required');
            }
            if ($("#txtDtMarriage").val() === "") {
                ErrArr.push('Date of Marriage is required');
            }
            if ($("#TxtPassportNo").val() === "") {
                ErrArr.push('Passport no is required');
            }
            if ($("#txtIdMark").val() === "") {
                ErrArr.push('Identification mark is required');
            }
        }
        function validateddl() {
            if ($("#ddlGender").val === "" || $("#ddlGender").val() == "0") {
                ErrArr.push('Please select the gender');
            }
            if ($("#ddlMaritalStatus").val === "" || $("#ddlMaritalStatus").val() == "0") {
                ErrArr.push('Please select the Marital Status');
            }
            if ($("#ddlNationality").val === "" || $("#ddlNationality").val() == "0") {
                ErrArr.push('Please select the Nationality');
            }
        }
    });

另见我的按钮 aspx：-

<asp:Button ID="btnSave" CssClass="button" Text="Save" runat="server" 
                    CausesValidation="true" onclick="btnSave_Click"
                    />

【问题讨论】：

我猜e.preventDefault(); 正在阻止一些应该向服务器发出的 POST 请求。
您调用preventDefault，这意味着如果所有验证成功，您的按钮单击什么也不做。删除此调用，或在点击处理程序结束时执行一些自定义操作
@Andrey：那么还有其他方法可以找到这个吗？
还对表单进行验证（“提交”而不是单击按钮。移动 preventDefault 的相同建议也适用
@mplungjan：你能用代码描述一下吗？请迷惑

标签： javascript jquery asp.net validation

【解决方案1】：

我建议你不要使用点击按钮而是提交表单来验证：

$(document).ready(function () {
    $('#formID').on("submit",function (e) {
        // e.preventDefault(); // does not belong here
        validateTitle();
        validateddl();
        validateTextBoxes();
        if (ErrArr.length > 0) {
            e.preventDefault();// but here
            alert(ErrArr.join("\n"));
            ErrArr = [];
        }
    });
.
.
.

我认为这也意味着你应该让你的按钮成为提交按钮，并确保 asp 不添加点击事件，因为它已经由 jQuery 分配

【讨论】：

但在验证后，我的其他代码背后的场景也是他们的。那么呢？
咳咳，我不是很喜欢 ASP... - 我猜你后面的代码在按钮上？
是的，先生，后面的按钮点击代码..但是谢谢。我得到了解决方案

【解决方案2】：

$('#btnSave').on("click", function(e) {
    //e.preventDefault();
    validateTitle();
    validateddl();
    validateTextBoxes();
    if(ErrArr.length > 0) {
        e.preventDefault(); //use e.preventDefault here
        alert(ErrArr.join("\n"));
        ErrArr = [];
        //return false;
    }
});

【讨论】：

【解决方案3】：

仅当客户端验证失败时，才在按钮单击处理程序上阻止移动事件。

    $('#btnSave').click(function (e) {

        validateTitle();
        validateddl();
        validateTextBoxes();
        if (ErrArr.length > 0) {
            alert(ErrArr.join("\n"));
            ErrArr = [];
            e.preventDefault();
            return false;
        }
    });

【讨论】：

return false 不再需要

【解决方案4】：

试试这个

$('#btnSave').click(function(e) {
    //e.preventDefault();
    validateTitle();
    validateddl();
    validateTextBoxes();
    if(ErrArr.length > 0) {
        e.preventDefault(); //use e.preventDefault here
        alert(ErrArr.join("\n"));
        ErrArr = [];
        //return false;
    }
});

【讨论】：

return false 则不再需要