locked
Asp.net form button is not triggering the post pack in updatepanel with jquery validation engine in Content Page RRS feed

  • Question

  • User-890637366 posted

    I have a ASP.NET FORM with Master page , and have placed the form controls inside the updatepanel and i am using Jquery - validation engine to validate the form controls . all working fine . but submit button is not triggering the postback event . I have tried all after googling many suggestion . but yet to get the solution for this issue . It would be great if any expert can help me to resolve this issue . Thanks in Advance . _ Martin

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
        <link href="Content/ValidationEngine.css" rel="stylesheet" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
      <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.js"></script>    
    
         <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 nopl ">
                        <div class="login-form">
                            <asp:UpdatePanel runat="server" ID="usernameupdatepanel" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <div class="form-group">
                                        <label class="control-label sr-only" for="name">Full Name</label>
                                        <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control validate[required]" placeholder="Full Name" />
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label sr-only" for="name">Mobile Number</label>
                                        <asp:TextBox runat="server" ID="txtMobileNumber" CssClass="form-control validate[required,custom[integer],maxSize[10],minSize[10]]" placeholder="Mobile Number" OnChange="CheckUserName(this)" />
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label sr-only" for="email">Email</label>
                                        <asp:TextBox runat="server" ID="txtEmailID" CssClass="form-control validate[required,custom[email]]" placeholder="EMail - ID"  />
                                    </div>
    
                                    <div class="form-group">
                                        <label class="control-label sr-only" for="password"></label>
                                        <%--<input id="password" type="password" name="password" placeholder="create password" class="form-control mb0" required>--%>
                                        <asp:TextBox runat="server" ID="password" name="password" CssClass="form-control validate[required]" ClientIDMode="Static" TextMode="Password" placeholder="Password" />
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label sr-only" for="password"></label>
                                        <asp:TextBox runat="server" ID="confirm_password" name="confirm_password" TextMode="Password" CssClass="form-control validate[required,equals[password]]" placeholder="Confirm Password" />
                                    </div>
                                    <div class="form-group">
                                        <asp:Image ID="imgCaptcha" runat="server" ImageUrl="~/CaptchaImage.aspx" />
                                        <br />
                                        <asp:Label runat="server" ID="lblCaptchaMessage"></asp:Label>
                                    </div>
                                    <div class="form-group">
                                        <asp:TextBox ID="txtCaptchaText" runat="server" Width="100px" />
                                        [Type Security code here]
                                    </div>
                                    <asp:HiddenField ID="hdnIpaddress" runat="server" ClientIDMode="Static" />
                                    <asp:HiddenField ID="hdnCountry" runat="server" ClientIDMode="Static" />
                                    <asp:HiddenField ID="hdnCity" runat="server" ClientIDMode="Static" />
                                    <asp:Button ID="btnSubmit" runat="server"   class="btn btn-default btn-block mb10" Text="Submit"  OnClick="btnSubmit_Click" />
    
                                    <asp:Label ID="lblMessage" runat="server" />
                                </ContentTemplate>
    
                            </asp:UpdatePanel>
    
    
    
         <script type="text/javascript">
            $(function () {
    
                $("[id*=btnSubmit]").click(function () {
                    $("#AYform").validationEngine('attach', { promptPosition: "topRight", scroll: false });
                });
    
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_initializeRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate.join().indexOf("usernameupdatepanel") != -1) {
                            if (!$("[id*=usernameupdatepanel]").validationEngine('validate')) {
                                e.set_cancel(true);
                            }
                        }
                    });
                };
    
            });
       </script>

    </div> </div>

    Saturday, October 5, 2019 12:48 PM

Answers

  • User-719153870 posted

    Hi Martin,

    Sorry for any misunderstanding, please see below code:

    ASPX:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.js"></script>
    
        <script type="text/javascript">
            $(function () {
                $("[id*=btnSubmit]").click(function () {
                    $("#form1").validationEngine('attach', { promptPosition: "topRight", scroll: false });
                });
    
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_initializeRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate.join().indexOf("usernameupdatepanel") != -1) {
                            if (!$("#form1").validationEngine('validate')) {
                                e.set_cancel(true);
                            }
                        }
                    });
                };
            });
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 nopl ">
            <div class="login-form">
                <asp:UpdatePanel runat="server" ID="usernameupdatepanel" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="form-group">
                            <label class="control-label sr-only" for="name">Full Name</label>
                            <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control validate[required]" placeholder="Full Name" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="name">Mobile Number</label>
                            <asp:TextBox runat="server" ID="txtMobileNumber" CssClass="form-control validate[required,custom[integer],maxSize[10],minSize[10]]" placeholder="Mobile Number" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="email">Email</label>
                            <asp:TextBox runat="server" ID="txtEmailID" CssClass="form-control validate[required,custom[email]]" placeholder="EMail - ID" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="password"></label>
                            <asp:TextBox runat="server" ID="password" name="password" CssClass="form-control validate[required]" ClientIDMode="Static" TextMode="Password" placeholder="Password" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="password"></label>
                            <asp:TextBox runat="server" ID="confirm_password" name="confirm_password" TextMode="Password" CssClass="form-control validate[required,equals[password]]" placeholder="Confirm Password" />
                        </div>
                        <div class="form-group">
                            <asp:Image ID="imgCaptcha" Width="50px" Height="37.4px" runat="server" ImageUrl="Images/FCF.jpg" />
                            <br />
                            <asp:Label runat="server" ID="lblCaptchaMessage"></asp:Label>
                        </div>
                        <div class="form-group">
                            <asp:TextBox ID="txtCaptchaText" runat="server" Width="100px" />
                            [Type Security code here]
                        </div>
                        <asp:HiddenField ID="hdnIpaddress" runat="server" ClientIDMode="Static" />
                        <asp:HiddenField ID="hdnCountry" runat="server" ClientIDMode="Static" />
                        <asp:HiddenField ID="hdnCity" runat="server" ClientIDMode="Static" />
                        <asp:Button ID="btnt" runat="server" Text="Button" />
                        <asp:Button ID="btnSubmit" runat="server" class="btn btn-default btn-block mb10" Text="Submit" OnClick="btnSubmit_Click" />
                        <asp:Label ID="lblMessage" runat="server"  />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </asp:Content>

    CS:

    public partial class ValidationEngineDemo : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void btnSubmit_Click(object sender, EventArgs e)
            {
                lblMessage.Text = "Success";
            }
        }

    Hope this's what you want.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 8, 2019 1:12 AM

All replies

  • User-719153870 posted

    Hi Martin,

    if (!$("[id*=usernameupdatepanel]").validationEngine('validate')) {
                                e.set_cancel(true);
                            }

    It seems that this validationEngine can't apply to an updatepanel control, please change this jquery selector to your form which seems to be $("#AYform").

    This part of code should be like:

    <script type="text/javascript">
            $(function () {
                $("[id*=btnSubmit]").click(function () {
                    $("#AYform").validationEngine('attach', { promptPosition: "topRight", scroll: false });
                });
    
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_initializeRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate.join().indexOf("usernameupdatepanel") != -1) {
                            if (!$("#AYform").validationEngine('validate')) {
                                e.set_cancel(true);
                            }
                        }
                    });
                };
            });
        </script>

    And the result:

    An interesting thing is that the value of $("[id*=usernameupdatepanel]").validationEngine('validate') can be affected by the time of this submit event took.

    Simply put a "alert(1)" before those two if statements in function(sender,e) which will take you little time to close the popup alert message will change the value to false, not sure why this happen but don't mind.

    Hope this could help.

    Best Regard,

    Yang Shen

    Monday, October 7, 2019 7:37 AM
  • User-890637366 posted

    Hi Yang thanks for your reply . However, can u please let me know the final working code that i need to check with all the browser. Still i am not clear with the code . Please .

    Thanks & Regards,

    Martin 

    Monday, October 7, 2019 1:48 PM
  • User-719153870 posted

    Hi Martin,

    Sorry for any misunderstanding, please see below code:

    ASPX:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.js"></script>
    
        <script type="text/javascript">
            $(function () {
                $("[id*=btnSubmit]").click(function () {
                    $("#form1").validationEngine('attach', { promptPosition: "topRight", scroll: false });
                });
    
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                if (prm != null) {
                    prm.add_initializeRequest(function (sender, e) {
                        if (sender._postBackSettings.panelsToUpdate.join().indexOf("usernameupdatepanel") != -1) {
                            if (!$("#form1").validationEngine('validate')) {
                                e.set_cancel(true);
                            }
                        }
                    });
                };
            });
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 nopl ">
            <div class="login-form">
                <asp:UpdatePanel runat="server" ID="usernameupdatepanel" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="form-group">
                            <label class="control-label sr-only" for="name">Full Name</label>
                            <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control validate[required]" placeholder="Full Name" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="name">Mobile Number</label>
                            <asp:TextBox runat="server" ID="txtMobileNumber" CssClass="form-control validate[required,custom[integer],maxSize[10],minSize[10]]" placeholder="Mobile Number" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="email">Email</label>
                            <asp:TextBox runat="server" ID="txtEmailID" CssClass="form-control validate[required,custom[email]]" placeholder="EMail - ID" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="password"></label>
                            <asp:TextBox runat="server" ID="password" name="password" CssClass="form-control validate[required]" ClientIDMode="Static" TextMode="Password" placeholder="Password" />
                        </div>
                        <div class="form-group">
                            <label class="control-label sr-only" for="password"></label>
                            <asp:TextBox runat="server" ID="confirm_password" name="confirm_password" TextMode="Password" CssClass="form-control validate[required,equals[password]]" placeholder="Confirm Password" />
                        </div>
                        <div class="form-group">
                            <asp:Image ID="imgCaptcha" Width="50px" Height="37.4px" runat="server" ImageUrl="Images/FCF.jpg" />
                            <br />
                            <asp:Label runat="server" ID="lblCaptchaMessage"></asp:Label>
                        </div>
                        <div class="form-group">
                            <asp:TextBox ID="txtCaptchaText" runat="server" Width="100px" />
                            [Type Security code here]
                        </div>
                        <asp:HiddenField ID="hdnIpaddress" runat="server" ClientIDMode="Static" />
                        <asp:HiddenField ID="hdnCountry" runat="server" ClientIDMode="Static" />
                        <asp:HiddenField ID="hdnCity" runat="server" ClientIDMode="Static" />
                        <asp:Button ID="btnt" runat="server" Text="Button" />
                        <asp:Button ID="btnSubmit" runat="server" class="btn btn-default btn-block mb10" Text="Submit" OnClick="btnSubmit_Click" />
                        <asp:Label ID="lblMessage" runat="server"  />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </asp:Content>

    CS:

    public partial class ValidationEngineDemo : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void btnSubmit_Click(object sender, EventArgs e)
            {
                lblMessage.Text = "Success";
            }
        }

    Hope this's what you want.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 8, 2019 1:12 AM
  • User-890637366 posted

    HI  Yang , 

     Thanks a lot man you saved my time .Its working now ... Keep up the good work . 

    Regards,

    Martin.

    Tuesday, October 8, 2019 7:05 AM