如何使用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表单的主要内容,如果未能解决你的问题,请参考以下文章
通过调用 ASP.NET 按钮单击从 jQuery 模态对话框回发
如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组?
在 PostBack (ASP.NET) 上运行 jQuery 函数