asp.net 如何在WebForms中的form.onSubmit过程中调用HTML5 form.checkValidity？

如何覆盖或扩展标准WebForms WebForm_OnSubmit JavaScript函数？
我在www.example.com WebForms网站中使用HTML5输入类型ASP.net。用户代理（例如Chrome、IE、Firefox）已正确处理数据清理、备用UI等。
通常，当用户单击<input type="submit">按钮时，User-Agent将停止提交，并显示UI以向用户指示其输入将无效：

WebForms的问题在于它没有使用 Submit 按钮，而是通过JavaScript回发来完成所有操作，而不是***提交***表单：

<asp:LinkButton ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click"></asp:LinkButton>

当呈现为客户端HTML时，它将成为对JavaScript的调用：

WebForm_DoPostBackWithOptions(...)

很长的形式是一个锚标签：

<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>

这意味着用户代理从不提示用户输入的元素无效。
即使form没有被“提交”，它仍然会触发onsubmit事件。我可以使用以下命令手动触发HTML5表单验证：

isValid = form.checkValidity();

理想情况下，我会在我的ASP .NETWebForms站点中挂钩该事件：

站点主控

<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基础结构删除了myonsubmit方法处理程序，并将其替换为自己的方法处理程序：

<form id="ctl01" onsubmit="javascript:return WebForm_OnSubmit();" action="UserProperties.aspx?userGuid=00112233-5544-4666-7777-8899aabbccdd" method="post">

所以我自己的submit调用被忽略了。看来钻研WebForm_OnSubmit会导致ASP .NETWebForms验证基础设施的兔子洞：

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;
    }
}

哪个叫，哪个叫，哪个用，哪个查。

只想使用WebForms验证HTML5表单

问题是WebForms有一个***巨大的***基础设施，用于在提交表单之前检查表单，并通过标准化机制向用户显示错误（以及我没有使用的整个基础设施）。它接管了表单的onsubmit事件，并且在此过程中（不必）使用<input type="submit">。
怎样才能说服ASP .NETWebForms网站让User-Agent验证表单？

另见

web窗体基础结构会删除该处理程序，因为您试图在可视化设计环境中将其直接添加到元素上，而web窗体的设计不是为了以这种方式工作。
捕获on-submit处理程序很容易，您只需要进行一些创造性的思考。
每当你在web表单环境中尝试处理类似的事情时，你必须学会考虑web表单页面呈现管道之后的解决方案，如果你试图找到一个直接在web表单引擎内部工作的解决方案，那么web表单每次都会赢。
如果需要的话，您可以在这里复制我的测试用例，或者您可以挑选出需要的部分并根据需要重用。

步骤1

用C#创建一个新的web表单项目（如果你愿意，你可以用VB来做，但是我用C#来做我的例子），一旦你的项目被创建，右键单击你的应用程序引用，进入NuGet并安装JQuery。
不使用JQuery，只使用本地方法就可以做到这一点，但今天是星期天，我今天很懒：-）

第二步

添加一个新的web表单到你的项目中（使用add new item），并调用这个“*Default.aspx *”，在这个表单上添加一些文本，一个文本框，一个按钮和一个标签。

代码应类似于：

<%@ 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>

然后按F7（或双击按钮）转到窗体的代码隐藏编辑器。

步骤3

将按钮处理程序的代码添加到后面的代码中。如果你做事情的方式和我完全一样，你的代码应该看起来类似于：

using System;

namespace jsvalidation
{
  public partial class Default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {}

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
      if(Page.IsPostBack)
      {
        lblResult.Text = "Well hello there " + txtName.Text;
      }
    }
  }
}

此时，您可以通过按F5来测试工作情况，当您按提交按钮时，无论您在文本框中输入（或不输入）什么，都应该在下面的标签中显示消息。
现在我们已经设置了一个基本的web表单，我们只需要拦截表单提交。

第四步

正如我刚才所说，您需要跳出web表单的框框来思考。
这意味着您需要在页面呈现并发送到浏览器之后运行拦截。
Web表单注入到混合中的所有JS通常在页面输出允许继续之前执行，这意味着在开始body标记之前执行。
为了让你的代码在它之后运行，你需要把你的脚本放在html输出的END处，这样它就能最后运行。

将以下代码添加到body结束标记之前，但添加到form结束标记之后

<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">

  $(document).ready(function() {

    $('form').submit(function() {

      var uninput = $('input[data-jsname="username"]');
      var username = uninput.val();

      if (username == "")
      {
        alert("Please supply a username!");
        return false;
      }

    });

  });

</script>

你们当中比较聪明的人，会立刻注意到我没有调用HTML5验证API，原因是我试图保持这个例子简单。
我检查用户名值的地方是很重要的部分。
重要的是我执行检查的匿名函数返回true或false（如果不返回任何值，则默认为True）。
如果返回false，将阻止回发，从而允许使用HTML5验证API更改表单字段所需的任何JS代码。
我个人的偏好是使用bootstrap（参见我的Bootstrap 2书籍的syncfusion免费电子书系列，以及即将发布的Bootstrap 3书籍），在这里你可以在框架中使用特殊的标记和css类，比如“has-errors”来适当地着色。
至于使用JQuery选择组件，这里有两件事您也需要注意。

1）你不应该在一个网页表单页面上有一个以上的表单，事实上，如果我没记错的话，如果你这样做，你的应用程序将无法编译，或者最多它肯定会在运行时抛出一个异常。
2）因为你只有一个表单，那么你可以非常安全地假设，JQuery中的通用'表单'选择器只会选择你的主表单（不管它的ID，名称，缺少或大小），并向它添加一个onsubmit处理程序，将总是在web表单完成后附加这个。
3）因为Web表单可以（通常是这样做的）篡改ID名称，通常使用“data attributes”向标记添加自定义位更容易。实际的ASP.NET js端验证本身也使用了完全相同的技巧，允许JS代码和.NET代码愉快地共存于同一页面中。有一些方法可以告诉.NET如何命名ID，但通常您必须设置许多选项。使用“数据属性”和JQ属性选择器语法是一种更安全、更容易管理的实现同样事情的方法。

总结

这并不是一项困难的任务，但我必须承认，如果你不看看外面的围栏，web表单建立在你周围，这不是一个立即显而易见的。
Web表单是为快速应用程序开发而设计的，主要是为那些习惯于桌面Win-Forms模型的开发者设计的。虽然Web表单现在仍然有它的位置，但对于新格林菲尔德应用程序，我建议你也看看其他的选择，特别是那些建立在新的HTML5规范努力奠定和完善的基础上的应用程序。

asp.net 如何在WebForms中的form.onSubmit过程中调用HTML5 form.checkValidity？

只想使用WebForms验证HTML5表单

另见

1条答案

步骤1

第二步

步骤3

第四步

总结

相关问题

热门标签

最新问答