In this article I will explain with an example, how to build a Bootstrap HTML5 Registration (Signup) Form and perform validations using the numerous HTML5 in-built validations such as:
Required – Implemented using the HTML5 required attribute.
Email – Implemented using the HTML INPUT Email TextBox.
Password Strength (Password Policy) – Implemented using the HTML5 pattern attribute and Regular Expressions.
Compare Passwords – Implemented with the help of HTML5 and JavaScript.
The source code is attached at the end of article.
Required, Email, Password Strength and Compare Password validations in HTML5
The following HTML Markup consists of a simple Signup (Registration) Form designed using Bootstrap.
The Form consists of the following elements:-
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 title attribute.
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 title attribute is used to display information to the user when the HTML5 pattern validation fails.
Confirm Password TextBox
The Password TextBox has been assigned JavaScript onchange event handler and the Confirm Password TextBox is assigned JavaScript onkeyup event handler.
When the above 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 validation is performed by simply making using of HTML INPUT Email TextBox. 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 an HTML 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 method="post" action="Default.aspx" id="form1">
<div style="max-width: 400px;">
<h2 class="form-signin-heading">
Registration</h2>
<label for="txtUsername">
Username</label>
<input name="txtUsername" type="text" id="txtUsername" class="form-control" placeholder="Enter Username"
required />
<br />
<label for="txtPassword">
Password</label>
<input name="txtPassword" type="password" id="txtPassword" title="Password must contain: Minimum 8 characters atleast 1 Alphabet and 1 Number"
class="form-control" placeholder="Enter Password" required pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" />
<br />
<label for="txtConfirmPassword">
Confirm Password</label>
<input name="txtConfirmPassword" type="password" id="txtConfirmPassword" class="form-control"
placeholder="Confirm Password" />
<br />
<label for="txtEmail">
Email</label>
<input name="txtEmail" id="txtEmail" class="form-control" placeholder="Enter Email"
required type="email" />
<hr />
<input type="submit" name="btnSignup" value="Sign up" id="btnSignup" class="btn btn-primary" />
</div>
</form>
<script type="text/javascript">
window.onload = function () {
var txtPassword = document.getElementById("txtPassword");
var txtConfirmPassword = document.getElementById("txtConfirmPassword");
txtPassword.onchange = ConfirmPassword;
txtConfirmPassword.onkeyup = ConfirmPassword;
function ConfirmPassword() {
txtConfirmPassword.setCustomValidity("");
if (txtPassword.value != txtConfirmPassword.value) {
txtConfirmPassword.setCustomValidity("Passwords do not match.");
}
}
}
</script>
Screenshot
![Bootstrap HTML5 Registration (Signup) Form with validation Example and Source Code]()
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
