在表单提交期间使用 jquery validate

Question

我真的很陌生，我遇到了一个问题，即弹出 ddl 的警报，但在后台，表单仍在提交，“选择”选项上的值“”为空白

ddl： 类型

我的脚本：

<script type="text/javascript">

函数 saveCallReport() {

        var selectedFranchises = "";
        var selectedGroups = "";
        var selectedContacts = "";
        var selectedTopics = "";

        var ID = $('#<%=txtID.ClientID %>').val();
        if (ID == '') ID = '0';

        var Created = $('#<%=txtCreated.ClientID %>').val();
        var Confidential = document.getElementById('<%=chkConfidential.ClientID %>').checked;
        var Description = $('#<%=txtDescription.ClientID %>').val();
        var Employee = $('#<%=ddlEmployee.ClientID %>').val();
        var Priority = $('#<%=ddlPriority.ClientID %>').val();
        var Type = $('#<%=ddlType.ClientID %>').val();

        // Get Selected Franchises
        var LstRight = document.getElementById("<%=lstSelectedFranchises.ClientID %>");
        for (i = 0; i < LstRight.length; i++) {
            selectedFranchises = selectedFranchises + LstRight.options[i].value + ',';
        }
        if (selectedFranchises == null)
            selectedFranchises = "";

        // Get Selected Groups
        LstRight = document.getElementById("<%=lstSelectedGroups.ClientID %>");
        for (i = 0; i < LstRight.length; i++) {
            selectedGroups = selectedGroups + LstRight.options[i].value + ',';
        }
        if (selectedGroups == null)
            selectedGroups = "";

        // Get Selected Contacts
        LstRight = document.getElementById("<%=lstSelectedContacts.ClientID %>");
        for (i = 0; i < LstRight.length; i++) {
            selectedContacts = selectedContacts + LstRight.options[i].value + ',';
        }
        if (selectedContacts == null)
            selectedContacts = "";

        // Get Selected Topics
        LstRight = document.getElementById("<%=lstSelectedTopics.ClientID %>");
        for (i = 0; i < LstRight.length; i++) {
            selectedTopics = selectedTopics + LstRight.options[i].value + ',';
        }
        if (selectedTopics == null)
            selectedTopics = "";

        var obj = {
            id: ID,
            created: Created,
            hqemployee: Employee,
            type: Type,
            priority: Priority,
            confidential: Confidential,
            description: Description,
            franchises: selectedFranchises,
            groups: selectedGroups,
            contacts: selectedContacts,
            topics: selectedTopics,
        };

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveUrl("~/CallReportDetail.aspx/saveCallReport") %>',
            data: JSON.stringify(obj),
            dataType: "json",
            success: function (result) {

                $('#txtID').val(result.d);
                window.location.replace("/CallReports/Details?Id=" + result.d);

            },
            error: function (xhr, ajaxOptions, thrownError) {

                alert("There was a problem saving the Call Report: " + thrownError);

            }
        });

        return false;
    }

    var submit = 0;
    function CheckDouble() {
        if (++submit > 1) {
            alert('Saving...');
            return false;
        }
    }

    $(function formValid() {
        $("[id*=btnSave]").click(function() {
            var ddlType = $("[id*=ddlType]");
            if (ddlType.val() == "") {
                alert("Please select a type!");
                return false;
            }

        });
    });
</script>

我的提交按钮：

                <td style="padding-left: 720px;">
                <asp:LinkButton ID="btnSave" Type="submit" runat="server" Text="Save" OnClientClick="CheckDouble(); return saveCallReport();" UseSubmitBehavior="false" CssClass="btn btn-primary btn-sm"/>
            </td>

谁能告诉我哪里出错了？我有一个想法，我需要一个 submitHandler，但不知道如何将其写入此代码。

Answer 1

好的，这里有一些问题。

1. 您应该避免在同一个按钮上添加 OnClientClick 和 JQuery .click() 事件。这只是一种糟糕的风格，而且有点混乱。
2. 您通过 JQuery ajax 提交数据，因此不需要 LinkBut​​ton。只需使用普通的 html 按钮即可。
3. 您的 saveCallReport() 函数自行处理成功和失败结果，无需返回任何内容。
4. 即使验证失败，CheckDouble() 方法也会增加提交值，因此在您从 ddl 中选择后，随后单击该按钮将警告正在保存...消息，这不是预期的行为。您应该在按钮提交时添加/删除禁用的属性。

无论如何，这就是我的建议。 html按钮：

<button id="btnSave" class="btn btn-primary btn-sm">Save</button>

连接按钮：

$(document).ready(function() {
    $('#btnSave').click(function () {

        var ddlType = $("#ddlType");
        if (ddlType.val() == "") {
            alert("Please select a type!");
            return false;
        }

        $(this).attr("disabled", "disabled");
        saveCallReport();
        $(this).removeAttr("disabled");
    });
});