Home »
Java programming language
jQuery Validation for JSP with Bootstrap Design
By: Vanka Manikanth, on 27 JAN 2017
In this tutorial, we will learn how to validate input fields for JSP using jQuery with Responsive layout? There are number of validations on the page before submit, until and unless the user provide the valid details the form would not get submitted. So we are validating the user with these fields.
Index.jsp
Here we are validating each field as soon as the user changes from one input to the other, and we have kept the form auto complete to off. So that no user details would be auto completed.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>REGISTRATION</title>
<link rel="stylesheet" href="css/bootstrap.css"><!-- importing bootstrap file -->
</head>
<body>
<div class="container">
<h1>Jquery Validation For Jsp with Bootstrap Design</h1>
<form action ="view.jsp" method="post" role="form" class="form-horizontal col-lg-8 col-md-8 col-sm-8 col-xs-12" autocomplete="off">
<div class="form-group">
<label for="id">USER ID</label>
<input type="text" class="form-control" id="id" name="userid" placeholder="Enter ID">
<span id="errid" class="alert alert-danger col-lg-8 col-md-8 col-sm-8 col-xs-12">Should Contain Only Digits</span>
</div>
<div class="form-group">
<label for="name">USER NAME</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter Name">
<span id="errname" class="alert alert-danger col-lg-8 col-md-8 col-sm-8 col-xs-12">Should Contain Only Characters</span>
</div>
<div class="form-group">
<label for="password">PASSWORD</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
</div>
<div class="form-group">
<label for="cpassword">Confirm PASSWORD</label>
<input type="password" class="form-control" id="cpassword" name="password" placeholder="Enter Password">
<span id="errpass" class="alert alert-danger col-lg-8 col-md-8 col-sm-8 col-xs-12">Should Match the passwords</span>
</div>
<div class="form-group">
<label for="email">EMAIL</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
<span id="erremail" class="alert alert-danger col-lg-8 col-md-8 col-sm-8 col-xs-12">Invalid Email Address</span>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit" name="btn" id="Rbtn" value="register">REGISTER</button>
</div>
</form>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<!-- here we are importing the jquery file which is downloaded -->
<script src="js/validate.js"></script>
</body>
</html>
Validate.js
This is the jQuery validation done for every field by getting the ids of the HTML elements.
$(document).ready(function(){
$("#alertSuccess").hide();
$("#errid").hide();
$("#errname").hide();
$("#erremail").hide(); //Initially hiding the error spans
$("#errpass").hide();
$("#Rbtn").click(function() {
var userid=$("#id").val();
var username=$("#username").val();
var password=$("#password").val(); //triggers on click of register
var email=$("#email").val();
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var letters = /^[A-Za-z]+$/;
if(userid=="" || userid==null){
alert("UserID cannot be Empty");
return false;
}else if(username==null || username==""){
alert("UserName cannot be Empty");
return false;
}else if(password=="" || password==null){
alert("Password cannot be Empty");
return false;
}else if(email=="" || email==null){
alert("Email cannot be Empty");
return false;
}else if(isNaN(userid)){
alert("User ID should contain Only Digits");
return false;
}else if(!(email.match(mailformat))){
alert("Please Enter Valid Mail ID");
return false;
}else if(!(username.match(letters))){
alert("Pleas Enter only Characters for Username");
return false;
}else{
$("#alertSuccess").show();
$("#formid").submit();
return true;
}
});
$("#id").change(function(){
var userid=$("#id").val(); //here we are restricting the user at the time of typing,we called an event "Keyup"
if(isNaN(userid)){
$("#errid").show(); //if user enters other than number then the error span will be shown
return false;
}else{
$("#errid").hide();
return true;
}
});
$("#username").change(function(){
var username=$("#username").val();
var letters = /^[A-Za-z]+$/;
if(!(username.match(letters))){
$("#errname").show();
return false;
}else{
$("#errname").hide();
return true;
}
});
$("#email").change(function(){
var email=$("#email").val();
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(!(email.match(mailformat))){
$("#erremail").show();
return false;
}else{
$("#erremail").hide();
return true;
}
});
$("#cpassword").change(function(){
var password=$("#password").val();
var cpassword=$("#cpassword").val();
if(!(password==cpassword)){
$("#errpass").show();
return false;
}else{
$("#errpass").hide();
return true;
}
});
});
View.jsp
Soon as the user cleared all the validations, the form would get submitted and the success message of bootstrap has been shown.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Success</title>
</head><!-- This page executes when the valiadtion is done -->
<body>
<div class="container-fluid">
<span class="alert alert-success col-lg-8 col-md-8 col-sm-8 col-xs-12">Hey! ${param.username}, You Have SuccessFully Validated And Submitted</span>
</div>
</body>
</html>
Output
