如何使用asp.net按钮通过jquery进行验证然后进入后台代码web表单

Posted

技术标签:

【中文标题】如何使用asp.net按钮通过jquery进行验证然后进入后台代码web表单【英文标题】:How to use the asp.net button to validate by jquery and then go to the behind code web form 【发布时间】:2020-10-10 05:33:37 【问题描述】:

我有一个 asp.net 网络表单,我想先验证文本框 然后之后(成功后),去后面的代码cs 但是现在当我按下按钮时它不起作用

jquery 代码: ...

<script type="text/javascript">
         (function () 
             'use strict';
             window.addEventListener('load', function () 
                 var form = document.getElementById('needs-validation');
                 form.addEventListener('submit', function (event) 
                         if (form.checkValidity() === false) 
                         event.preventDefault();
                         event.stopPropagation();
                     
                    form.classList.add('was-validated');
                , false);
            , false);
        )();
    </script>

...

aspx 页面: ...

    <div class="form-row" style="z-index:1">
        <div class="form-group col-md-4" style="z-index:1">
      <label for="inputEmail4">Birth Date</label>
        <asp:TextBox ID="Birth_Date" class="form-control" runat="server" style="text-align:center" ValidationGroup="check" required></asp:TextBox>
      <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" TargetControlID="Birth_Date" Format="dd/MM/yyyy">
      </cc1:CalendarExtender>
              <div class="invalid-feedback">  
                  enter date
             </div>
          </div></div>
<div class="form-row">
    <div class="form-group col-md-4">
      <label for="inputEmail4">phone number</label>
        <asp:TextBox ID="Phone" class="form-control"  runat="server" style="text-align:center; z-index:-1" ValidationGroup="check" pattern="^\d10$" required></asp:TextBox>
         <div class="invalid-feedback">  
                  enter phone
             </div>
    </div>
      </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:LinkButton ID="signup" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>

...

cs 代码: ...

protected void signup_Click1(object sender, EventArgs e)
        
        if(Page.IsValid)
        
            Birth_Date.Text = "ُWelcome";
        
        

...

我的 aspx 页面中有更多文本框

【问题讨论】:

您的ID="signup" 按钮上没有OnClick 事件。如果你想在提交之前做一些事情,还可以添加OnClientClick 事件并调用你想要的任何 js 函数。通过OnClientClick,您还可以阻止提交发生 您拥有的是网络表单,而不是赢取表单 @JayNyxed 我添加了 OnClick 和 OnClientClick 并没有工作,但是当我使用 html 按钮时它工作了!但是脚本验证成功后我无法访问后面的代码 【参考方案1】:

<script type="text/javascript">
         function ftn()
             'use strict';
             window.addEventListener('load', function () 
                 var form = document.getElementById('needs-validation');
                 form.addEventListener('submit', function (event) 
                         if (form.checkValidity() === false) 
                         event.preventDefault();
                         event.stopPropagation();
                     
                    form.classList.add('was-validated');
                , false);
            , false);
        
    </script>

并将 onclientclick 属性添加到 asp:button

<asp:LinkButton ID="signup" onclientclick="ftn()" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>

【讨论】:

没用!当我按下按钮时,什么都没有出现! 将此 [ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "Func()", true);] 添加到您的按钮单击事件中。

以上是关于如何使用asp.net按钮通过jquery进行验证然后进入后台代码web表单的主要内容,如果未能解决你的问题,请参考以下文章

启用使用 jquery 禁用 asp.net 验证控件

通过调用 ASP.NET 按钮单击从 jQuery 模态对话框回发

如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组?

在 PostBack (ASP.NET) 上运行 jQuery 函数

Jquery 验证单击提交按钮两次 ASP.Net 核心 MVC 项目

jQuery Validation - 一个 asp.net 表单上的多个提交按钮,不同的验证组?