In this article I will explain with an example, how to build a Registration Form using Bootstrap in ASP.Net.
The Registration Form will contain the fields along with validations implemented using HTML5 and Bootstrap in ASP.Net.
HTML Markup
The following HTML Markup consists of a simple Signup (Registration) Form designed using Bootstrap.
The Form consists of the following ASP.Net controls:-
Username TextBox
The Username TextBox is set with the HTML5 required attribute which makes sure that the field must have value when the Form is submitted.
Password TextBox
The Password TextBox is set with HTML5 required attribute, HTML5 pattern attribute and Tooltip property and the TextMode property Password.
The HTML5 pattern attribute has a Regular Expression which validates the Password to make sure it adheres condition that the password must be of minimum 8 characters and has at-least 1 Alphabet and 1 Number.
The Tooltip property is used to display information to the user when the HTML5 pattern validation fails.
Note: Tooltip property is converted to title attribute when the page is rendered in browser.
Confirm Password TextBox
The Confirm Password TextBox is set with the TextMode property Password.
The Password TextBox has been assigned JavaScript OnChange event handler and the Confirm Password TextBox is assigned JavaScript OnKeyUp event handler.
When the event handler triggers then the ConfirmPassword JavaScript function gets called which compares the Password and Compare Password TextBoxes and if the value does not match it sets a validation error using the setCustomValidity JavaScript function which is available only in HTML5 supported browsers.
Email
The Email TextBox is set with the TextMode property Email. You can also add additional validation for Email by making use of the HTML5 pattern attribute.
Note: The HTML5 validation will only work when the Fields and the Submit Button are enclosed in a Form.
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen"/>
<form id="form1" runat="server">
<div style="max-width: 400px;">
<h2 class="form-signin-heading">Registration</h2>
<asp:Label Text="Username" runat="server" AssociatedControlID="txtUsername"/>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username" required="required"/>
<br/>
<asp:Label Text="Password" runat="server" AssociatedControlID="txtPassword"/>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Password must contain: Minimum 8 characters at-least 1 Alphabet and 1 Number"
CssClass="form-control" placeholder="Enter Password" required="required" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"/>
<br/>
<asp:Label Text="Confirm Password" runat="server" AssociatedControlID="txtConfirmPassword"/>
<asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="Confirm Password" required="required"/>
<br/>
<asp:Label Text="Email" runat="server" AssociatedControlID="txtEmail"/>
<asp:TextBox ID="txtEmail" runat="server" TextMode="Email" CssClass="form-control" placeholder="Enter Email" required="required"/>
<hr/>
<asp:Button ID="btnSignup" runat="server" Text="Sign up" CssClass="btn btn-primary"/>
</div>
</form>
<script type="text/javascript">
window.onload = function () {
var txtPassword = document.getElementById("<%=txtPassword.ClientID%>");
var txtConfirmPassword = document.getElementById("<%=txtConfirmPassword.ClientID%>");
txtPassword.onchange = ConfirmPassword;
txtConfirmPassword.onkeyup = ConfirmPassword;
function ConfirmPassword() {
txtConfirmPassword.setCustomValidity("");
if (txtPassword.value != txtConfirmPassword.value) {
txtConfirmPassword.setCustomValidity("Passwords do not match.");
}
}
}
</script>
Screenshot
![Bootstrap Registration Form in ASP.Net]()
Demo
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Downloads
