ASP.NET - JQuery对话框中的HTML表单不在aspx页面上工作但在html页面中工作

时间:2016-02-16 17:37:32

标签: jquery asp.net html5 forms visual-studio-2010

我正在使用JQuery Modal对话框来显示一个小表单,它在html页面上完美运行(在Visual Studio 2010中)。但是,当我在aspx页面中创建相同的表单时,表单提交并不像预期的那样工作。即使是最简单的事情,例如需要html5输入字段,也不会在留空时产生错误消息。我觉得aspx页面上的内容正在干扰它。我相信我的asps页面中的表单标记存在某种错误,而asp:content - ' HeadContent'作为默认表格本身...任何人都可以帮我解决这个问题吗?

这就是我的html表单的样子: -

https://plnkr.co/edit/uUWZc9PNSABQ9mpcwti9?p=preview

在aspx页面上产生同样的事情: -

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="About.aspx.cs" Inherits="CheckInSystem.About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script type="text/jscript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/jscript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="Scripts/ProgramFiles/Popup.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <button id="create-user" type="button">Please Check-in</button>
    <div id="dialog-form" title="New Visitor Check-in">
     <form id="myForm" action="About.aspx" method="post">
      <p class="validateTips">
            All form fields are required.</p>
      <div class="formContainer">
        <div class="row">
          <b>Visitor:</b>
          <input id="visitor" type="text" runat="server" style="margin-left: 60px" required="true" />
        </div>
        <div class="row">
          <b>Type of Visit:</b>
          <asp:dropdownlist id="TypeOfVisitDesc" runat="server" datavaluefield="TypeOfVisitKey" datatextfield="TypeOfVisitDesc" cssclass="ddlist" datasourceid="TypeOfVisitDataSrc"></asp:dropdownlist>
          <asp:linqdatasource id="TypeOfVisitDataSrc" runat="server" contexttypename="CheckInSystem.CheckInSystemDataContext" entitytypename="" tablename="TypeOfVisits"></asp:linqdatasource>
        </div>
        <div class="row">
          <b>Visitee:</b>
          <input id="visitee" type="text" runat="server" style="margin-left: 59px" required="true" />
        </div>
        <div class="row">
          <b>Arrival:</b>
          <input id="arrival" type="text" runat="server" style="margin-left: 59px" required="true" />
        </div>
        <div class="row">
          <b>Departure:</b>
          <input id="departure" type="text" runat="server" style="margin-left: 33px" required="true" />
        </div>
      </div>
      <div>
        <input id="Submit1" type="submit" runat="server" value="Check-In" class="myButton" onclick="return true;" />
      </div>

     </form>
    </div>
</asp:Content>

我故意没有插入任何代码..因为我想要的只是&#39;必需&#39;留空时显示错误的字段...即使这样也无效。

我相信我的asps页面中的表单标记存在某种错误,而asp:content - &#39; HeadContent&#39;作为默认表格本身...任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

required=true需要<form>元素才能应用验证。

ASP.NET Forms从页面中删除所有<form>标记,以使用特定于ASP.NET Forms的自定义<form>元素替换它们。

这就是为什么标准验证在ASP.NET Forms下不起作用的原因。使用浏览器查看ASP.NET生成的HTML代码&gt;查看来源功能。