HTML5控件验证消失

时间:2017-10-26 11:14:26

标签: asp.net html5 twitter-bootstrap

我创建了一个引导程序表单,并在控件上使用'required'参数,以便在单击提交按钮时使用html5验证。

当我点击提交按钮时,验证气泡会出现一秒钟并消失。我不确定为什么会这样做。我在控件上使用runat =“server”,因为我需要从代码隐藏页面访问它们。

我尝试了几种选择,但仍然没有。

以下页面的精简版:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="iconCloud.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Client Details</title>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!-- Tell the browser to be responsive to screen width -->
        <link rel="stylesheet" href="../../Stylesheets/bootstrap.min.css">
        <!-- Bootstrap 3.3.6 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
        <!-- Ionicons -->
        <link rel="stylesheet" href="../../StyleSheets/theme.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="../../Stylesheets/iCheck.css">
        <!-- iCheck for checkboxes and radio inputs -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
        <!-- Google Font -->
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
            <![endif]-->

</head>
<body>
    <form id="Main" runat="server" runat="server"  >
         <section class="content">


                         <p class ="text-left" style="padding-top:50px">
                                <h2><label id="lblFormName">Create Client</label></h2>
                         </p>
                        <p class="text-right">
                                <button type="submit" id="cmdSave" name="Save" runat="server" class="btn btn-primary">Save</button>
                                <button type="button" id="cmdCancel" name="Cancel" runat="server" class="btn btn-default">Cancel</button>
                         </p>


                        <div class="panel-group">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Client Details</div>
                                     <div class="panel-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Client ID</label>
                                                    <input type="text" class="form-control" name="clientID" runat="server" id="txtClientID">
                                                 </div>               
                                                <div class="form-group">
                                                    <label>Client Name</label>
                                                    <input type="text" class="form-control" name="clientName" runat="server" id="txtClientName" required="required">
                                                </div>
                                                <div class="form-group">
                                                    <label>Company Name</label>
                                                    <input type="text" class="form-control" name="companyName" runat="server" id="txtCompanyName">
                                                </div>

                                            </div>

                                            <div class="col-md-6">
                                               <div class="form-group">
                                                    <label>Title</label>
                                                    <select class="form-control select2" name="clientTitle" runat="server" id="cboTitle"></select>    
                                                </div>                    
                                               <div class="form-group">
                                                    <label>Client Surname</label>
                                                    <input type="text" class="form-control" name="clientSurname" runat="server" id="txtSurname" required="required" >
                                               </div>


                                            </div>
                                        </div>


                                               <div class="col-md-6"><!--Left Column-->        
                                                   <div class="form-group">
                                                                <label>Client Type</label>
                                                                <select class="form-control select2" name="clientType" runat="server" id="cboType"></select>
                                                   </div><!-- /.form-group -->
                                               </div>
                                               <div class="col-md-6"><!--Right Column-->  
                                                       <div class="form-group">
                                                            <label>Client Status</label>
                                                            <select class="form-control select2" name="clientStatus" runat="server" id="cboClientStatus"></select>
                                                       </div><!-- /.form-group -->
                                                </div>
                                        </div><!-- /.Panel-body -->
                                     </div>
                             </div>

                         </div>

        </form>
       </section>
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

我会添加一个答案并将问题标记为重复,以便在其他人查找时为此问题提供参考。

将浏览器更新到最新版本可以解决问题。这是原始问题链接: Related question with info on the bug fix for this issue