In this
Tutorial we are performing client side validation using JavaScript with JSP page. and In this post you can learn that how to perform client side validation on Radio buttons,Check-boxes and on Select tag(Dorpdownlist).
Project Structure in Project Explorer:
Also read for details of How to create first JSP project
create a user input page.
Make sure for script tag for check.js
Make sure for script tag for check.js
<script type="text/javascript" src="check.js"></script> <%@ 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">
<title>Register</title>
<script type="text/javascript" src="check.js"></script>
</head>
<body bgcolor="gray">
<center >
<h1> Registration</h1>
<form action="success.jsp" method="post" name="myform">
<table bgcolor="lightblue">
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="user"/></td>
<td><label id="label1"></label></td>
</tr>
<tr>
<td>Country</td>
<td><select id="country" name="country">
<option value="" selected>select option</option>
<option value="India">INDIA</option>
<option value="USA">USA</option>
<option value="China">CHINA</option>
</select>
</td>
<td><label id="label2"></label></td>
</tr>
<tr>
<td>Gender</td>
<td ><input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female
</td>
<td><label id="label3"></label></td>
</tr>
<tr>
<td>Fruit</td>
<td><input type="checkbox" name="fruit" value="orange" />Orange
<input type="checkbox" name="fruit" value="banana" />Banana
<input type="checkbox" name="fruit" value="apple" />Apple
</td>
<td><label id="label4"></label></td>
</tr>
<tr>
<td><input type="submit" value="Submit" onclick="return validate();"></td>
</tr></table>
</form>
</center></body>
</html>
check.js
write javascript on check.js for validate stuform.jsp and we are performing validation on submit button click.
f1=1,f2=1,f3=1,f4=1;
function validate()
{
var user=document.getElementById("user").value;
var element=document.getElementById("label1");
if(user=="")
{
element.innerHTML="Username Required!";
element.style.color="red";
f1=1;
}
else
{
if(user.search(/^([A-Za-z]){4,15}$/)==-1)
{ element.innerHTML="Not a valid User Name.It must be 4-15 characters long";
element.style.color="red";
f1=1;
}
else {
element.innerHTML="Correct";
element.style.color="green";
f1=0;
}
}
var con=document.getElementById("country").value;
var element=document.getElementById("label2");
if(con=="")
{
element.innerHTML="Country Required!";
element.style.color="red";
f2=1;
}
else
{ element.innerHTML="Correct";
element.style.color="green";
f2=0;
}
var gender = document.myform.gender;
var element=document.getElementById("label3");
for (var i=0; i<gender.length; i++)
{
if (gender[i].checked)
{
element.innerHTML="Correct";
element.style.color="green";
f3=0;
break;
}
else
{
element.innerHTML="Gender Required!";
element.style.color="red";
}
}
var fruit = document.myform.fruit;
var element=document.getElementById("label4");
for (var i=0; i<fruit.length; i++)
{
if (fruit[i].checked)
{
element.innerHTML="Correct";
element.style.color="green";
f4=0;
break;
}
else
{
element.innerHTML="Fruit(s) Required!";
element.style.color="red";
f4=1;
}
}
if(f1==1||f2==1||f3==1||f4==1)
{
alert("Complete TextBox Conditions!!");
return false;
}
else
{
return true;
}
}
success.jsp
create a user's success page.
<%@ 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">
<title>success</title>
</head>
<body bgcolor="lightblue">
<center><h3>
Successfully Registered. </h3></center>
</body>
</html>
Download Code
View in Browser:
checking validation:
No comments:
Post a Comment