HTML5 form validation not working in ASP.NET Web Form
Question
I am trying to do a simple project where I can use the required tag on an input field so I can achieve instant form validation. However, I cannot get the validation to trigger. I am using IE11 and Chrome Version 53. Reference: http://www.instantshift.com/2016/05/16/html5-form-validation-floating-input-label/
Site.Master
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
<li><a id="registerLink" runat="server" href="~/Account/Register.aspx">Register</a></li>
<li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a runat="server" class="username" href="~/Account/Manage.aspx" title="Manage your account">
<asp:LoginName runat="server" CssClass="username" /></a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About.aspx">About</a></li>
<li><a runat="server" href="~/Contact.aspx">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</div>
</div>
</footer>
</form>
input used in here Default.aspx
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div>
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" required>
</div>
<div>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value="" required="">
</div>
</asp:Content>
2 answers
solution1
0 2016-10-20 13:57:16
Try the following:
<div>
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value=""
required="required" runat="server">
</div>
<div>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value=""
required="required" runat="server">
</div>
solution2
0 ACCPTED 2016-10-20 15:25:10
You need an event for validating the inputs regardless of what you use. The following will work if the user enters a value, removes it and moves away from the input.
<asp:TextBox ID="txtInput" runat="server" CausesValidation="True"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="form" ControlToValidate="txtInput" ErrorMessage="Please provide a value" Display="Dynamic"></asp:RequiredFieldValidator>
Once you know when to validate the input, use the Page_IsValid function to check if the form is in a valid state in javascript.
Please look at the following for validation using HTML5 elements:
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" value="" required="" onblur="validate(this)" runat="server"/>
<label for="email">Email (required):</label>
<input type="text" id="email" name="email" value="" required="" onblur="validate(this)" runat="server"/>
<script>
function validate(input) {
if (input.value.length === 0) {
alert("Please provide a value in " + input.name + " input");
}
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Trigger html5 form validation on asp.Net LinkButton OnClientClick
HTML based email not working properly in asp.net web form
Html Validation error in Asp.Net form
HTML to ASP.net web form page
Form Validation ASP.NET
HTML5 inline validation with asp.net
HTML5 validation and ASP.net Webforms
ASP.NET Web page validation - dual form
ASP.NET Web pages form query validation (razor)
Asp.Net web form validation with jquery Ajax
Related Tags