Question

我的客户端验证与验证摘要一起运行正常，直到我没有将onclientclick="ClientSideClick(this)"添加到按钮。

我也尝试添加触发器，但它仍然无法正常工作，也不会触发验证而不提交表单。

不确定为什么或需要做哪些改变才能使其发挥作用。

如果我从按钮onclientclick="ClientSideClick(this)"中删除了此代码，那么它工作正常，但我需要使用JS触发验证，以便用户不会多次提交相同的表单。

我已从页面中删除了其他表单元素，因此很容易理解。

<%@ Page Title="" Language="C#" MasterPageFile="SiteMain.Master" AutoEventWireup="true" CodeFile="ArticleDetails.aspx.cs" Inherits="ArticleDetails" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <!--- Code -HERE -->
            <asp:Panel ID="Panel1" runat="server">

                   <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="validation-sum" ValidationGroup="vgCommentForm" />

                <div class="cmt-fullname-w">
                    <asp:TextBox ID="txtcmtFullName" placeholder="Full Name" runat="server" CssClass="txt-cmt-fn" TabIndex="1"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Name can't be blank" CssClass="dp-cmt-validation" ControlToValidate="txtcmtFullName" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
                </div>

                <div class="cmt-email-w">
                    <asp:TextBox ID="txtcmtEmail" placeholder="Email" runat="server" CssClass="txt-cmt-fn" TabIndex="1"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Email can't be blank" ControlToValidate="txtcmtEmail" CssClass="dp-cmt-validation" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Enter correct email" ControlToValidate="txtcmtEmail" CssClass="dp-cmt-validation" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="vgCommentForm"></asp:RegularExpressionValidator>
                </div>

                <div class="cmt-btnsave-w">
                    <asp:Button ID="Button1" runat="server" CssClass="buttonPopups" OnClick="btnSaveComments_Click" OnClientClick="ClientSideClick(this)" Text="Post Comment" ValidationGroup="vgCommentForm" CausesValidation="true" UseSubmitBehavior="False" />
                </div>
            </asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Visible="false" CssClass="comment-pnl-success-w">
                <div class="comment-success">Successfully submitted</div>
            </asp:Panel>
            <!--- Code -HERE -->
        </ContentTemplate>
        <%--                            <Triggers>
                                <asp:PostBackTrigger ControlID="btnSaveComments" />
                            </Triggers>--%>
    </asp:UpdatePanel>
    <!--- UpdatePanel -->




    <script type="text/javascript">
        $(window).load(function () {

            $("#dp-trans-comment").click(function () {
                $('#commentModel').modal('show');
            });


            //Avoid Multiple Submission
            function ClientSideClick(myButton) {
                // Client side validation
                if (typeof (Page_ClientValidate) == 'function') {
                    if (Page_ClientValidate("vgCommentForm") == false) {
                        return false;
                    }
                }

                //make sure the button is not of type "submit" but "button"
                if (myButton.getAttribute('type') == 'button') {
                    // diable the button
                    myButton.disabled = true;
                    myButton.className = "btn btn-inactive";
                    myButton.value = "Please Wait..";
                }
                return true;
            }


        });

    </script>

</asp:Content>

Answer 1

我测试了你的代码。它在浏览器控制台中提供了ClientSideClick is not defined。这是因为该函数嵌套在另一个函数中。将其移到$(window).load(function () {之外。之后验证工作，并在更新面板中触发该方法。

<script type="text/javascript">
    $(window).load(function () {
        $("#dp-trans-comment").click(function () {
            $('#commentModel').modal('show');
        });
    });

    //Avoid Multiple Submission
    function ClientSideClick(myButton) {
        // Client side validation
        if (typeof (Page_ClientValidate) == 'function') {
            if (Page_ClientValidate("vgCommentForm") == false) {
                return false;
            }
        }

        //make sure the button is not of type "submit" but "button"
        if (myButton.getAttribute('type') == 'button') {
            // diable the button
            myButton.disabled = true;
            myButton.className = "btn btn-inactive";
            myButton.value = "Please Wait..";
        }
        return true;
    }
</script>

更新

<script type="text/javascript">
    $(document).ready(function () {
        bindcommentModel();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    //this is triggered at updatepanel update, so rebind the button again
    prm.add_endRequest(function () {
        bindcommentModel();
    });

    function bindcommentModel() {
        $("#dp-trans-comment").click(function () {
            $('#commentModel').modal('show');
        });
    }
</script>

带有更新面板的ASp.net webform不会触发Save Button事件

1 个答案: