如何在 WebForms 中的 form.onSubmit 期间调用 HTML5 form.checkValidity? [英] How to call HTML5 form.checkValidity during form.onSubmit in WebForms?
问题描述
如何覆盖或扩展标准的 WebForms WebForm_OnSubmit javascript 函数?
How can i override, or extend, the standard WebForms WebForm_OnSubmit javascript function?
我在 ASP.net WebForms 网站中使用 HTML5 输入类型.用户代理(例如 Chrome、IE、Firefox)已经正确处理数据清理、替代 UI 等.
I am using HTML5 input types in an ASP.net WebForms web-site. The user-agent (e.g. Chrome, IE, Firefox) already correctly handles data sanitization, alternate UI, etc.
通常，当用户点击 按钮时，User-Agent 将停止提交，并显示 UI 以向用户表明他们的输入是将无效:
Normally, when a user clicks an <input type="submit"> button, the User-Agent will halt the submit, and show UI to indicate to the user that their input is going to be invalid:
WebForms 的问题在于它不使用提交按钮.相反，一切都可以通过 javascript 回发完成，而不是提交表单:
The problem with WebForms is that it does not use a Submit button. Instead, everything can be done through a javascript postback, rather than submitting the form:
<asp:LinkButton ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click"></asp:LinkButton>
当呈现到客户端 html 时，它变成了对 Javascript 的调用:
Which, when rendered into client html, becomes a call to the Javascript:
WebForm_DoPostBackWithOptions(...)
真正长的形式是一个锚标签:
With the really long form being an Anchor tag:
<a id="Really_Long_Thing_ctl00_bbOK"
href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$VistaToolbar$ctl00$bbOK", "", true, "", "", false, true))'>
Save User
</a>
这意味着用户代理永远不会提示用户输入的元素无效.
This means that the user-agent never gives the user a prompt that an entered element is invalid.
即使 form 没有被提交"，它仍然会触发一个 onsubmit 事件.我可以使用以下内容手动触发 HTML5 表单验证:
Even though the form is not being "submitted", it does still trigger an onsubmit event. I can manually trigger the HTML5 form validation using something like:
isValid = form.checkValidity();
理想情况下，我会在我的 ASP.web WebForms 站点中挂钩该事件:
Ideally i would hook that event in my ASP.web WebForms site:
Site.master
<form runat="server" onsubmit="return CheckFormValidation(this)">
<script type="text/javascript">
function CheckFormValidation(sender)
{
//Is the html5 form validation method supported?
if (sender.checkValidity)
return sender.checkValidity();
//If the form doesn't support validation, then we just assume true
return true;
}
</script>
除了 WebForms 基础结构删除了 my onsubmit 方法处理程序，并将其替换为自己的:
Except that the WebForms infrastructure deletes my onsubmit method handler, and replaces it with its own:
<form id="ctl01" onsubmit="javascript:return WebForm_OnSubmit();" action="UserProperties.aspx?userGuid=00112233-5544-4666-7777-8899aabbccdd" method="post">
所以我自己的提交调用被忽略了.似乎深入研究 WebForm_OnSubmit 会导致 ASP.net WebForms 验证基础结构的一个兔子洞:
So my own submit call is ignored. It appears that delving into WebForm_OnSubmit leads down a rabbit hole of ASP.net WebForms validation infrastructure:
function WebForm_OnSubmit()
{
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
return false;
return true;
}
调用函数:
var Page_ValidationActive = false;
function ValidatorOnSubmit()
{
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else
{
return true;
}
}
哪个调用，哪个调用，哪个使用，哪个检查.
which calls, which calls, which uses, which checks.
问题是 WebForms 有一个巨大 基础设施，用于在提交前检查表单，并通过标准化机制(以及我不知道的整个基础设施)向用户显示错误利用).它接管了表单的 onsubmit 事件，并且它不会(必须)在过程中使用 .
The issue is that WebForms has a huge infrastrucure for checking a form before submitting, and displaying errors to users through a standardized mechanism (and entire infrastructure that i do not use). It takes over the onsubmit event of forms, and it doesn't (necessarily) use an <input type="submit"> in the process.
如何说服 ASP.net WebForms 网站让用户代理验证表单?
What can i do to convince ASP.net WebForms web-site to let the User-Agent validate the form?
- HTML5 验证和 ASP.net 网络表单
- 我该怎么做获取 ASP.Net 页面的客户端验证以运行?
- 触发标准 HTML5 验证(表单)而不使用提交按钮?
- MSDN 杂志:使用 HTML5 表单更好的 Web 表单
推荐答案
Web 表单基础结构删除了处理程序，因为您尝试将其直接添加到可视化设计环境中的元素上，而 Web 表单并非旨在处理此问题方式.
The web forms infrastructure deletes the handler because you attempt to add it directly on the element in the visual design environment, and web-forms is not designed to work this way.
捕获提交时处理程序很容易，您只需要创造性地思考即可.
Trapping the on-submit handler is easy, you just need to think a little creatively.
每当您尝试在 Web 表单环境中处理此类问题时，您都必须学会考虑在 Web 表单页面呈现管道之后出现的解决方案.如果您尝试找到直接在 Web 表单引擎中工作的解决方案，那么 Web 表单每次都会获胜.
Whenever your trying to deal with anything like this in a web-forms environment, you have to learn to think about solutions that come after the web-forms page rendering pipeline. If you try to find a solution that works directly inside the web-forms engine, then web-forms will win every-time.
如果您也需要，您可以在此处重现我的确切测试用例，或者您可以挑选出您需要的部分并根据需要重新使用.
You can reproduce my exact test case here if you need too, or you can pick out the bits you need and re-use as required.
在 C# 中创建一个新的 web 表单项目(如果你愿意，你可以在 VB 中完成，但我将我的示例作为 C#)，一旦你的项目被创建，右键单击你的应用程序引用，进入NuGet 并安装 JQuery.
Create a NEW web-forms project in C# (You can do it in VB if you want, but I'm putting my examples as C#), once your project has been created, right click on your application references, go into NuGet and install JQuery.
不用 JQuery 也可以做到这一点，只使用本机方法，但今天是星期天，我今天很懒:-)
It is possible to do this with out JQuery, and just use native methods, but it's Sunday and I'm being lazy today :-)
向您的项目添加一个新的网络表单(使用添加新项目)并将其命名为Default.aspx"，在此表单上添加一些文本、一个文本框、一个按钮和一个标签.
Add a new web-form to your project (using add new item) and call this 'Default.aspx', onto this form add some text, a text box a button and a label.
您的代码应该类似于:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jsvalidation.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Please enter your name :
<asp:TextBox ID="txtName" runat="server" data-jsname="username"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
</div>
<asp:Label runat="server" ID="lblResult">...</asp:Label>
</form>
</body>
</html>
<asp:Label runat="server" ID="lblResult">...</asp:Label></表单>