Exp 7
Exp 7
Exp 7
Aim: JSP program that implements form data validation using both client-side
and server-side validation.
Code:
Registration.Form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form method="post" action="ProcessRegistration.jsp">
<!-- Username -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<span id="usernameError" class="error"></span><br>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span id="emailError" class="error"></span><br>
<!-- Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<span id="passwordError" class="error"></span><br>
<!-- Submit Button -->
<input type="submit" value="Register">
</form>
<!-- Client-side validation -->
<script>
function validateForm() {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var isValid = true;
// Username validation
if (username.trim() === '') {
document.getElementById('usernameError').innerText = 'Username is
required';
isValid = false;
} else {
document.getElementById('usernameError').innerText = '';
}
// Email validation
var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
document.getElementById('emailError').innerText = 'Invalid email address';
isValid = false;
} else {
document.getElementById('emailError').innerText = '';
}
// Password validation
if (password.trim() === '') {
document.getElementById('passwordError').innerText = 'Password is
required';
isValid = false;
} else {
document.getElementById('passwordError').innerText = '';
}
return isValid;
}
</script>
</body>
</html>
ProcessRegistration.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form Submission</title>
</head>
<body>
<h2>Registration Form Submission</h2>
<%
String username = request.getParameter("username");
String email = request.getParameter("email");
String password = request.getParameter("password");
// Server-side validation
boolean isValid = true;
if (username.trim().isEmpty() || email.trim().isEmpty() ||
password.trim().isEmpty()) {
out.println("<p class='error'>All fields are required.</p>");
isValid = false;
}
if (!isValid) {
out.println("<p><a href='RegistrationForm.jsp'>Go back to registration
form</a></p>");
} else {
// Process registration logic here (e.g., store data in database)
out.println("<p>Registration successful!</p>");
}
%>
</body>
</html>
RegistrationForm.jsp: This JSP page contains the registration form with fields for username, email,
and password. Client-side validation is performed using JavaScript to ensure that the fields are not
empty and that the email address is valid.
ProcessRegistration.jsp: This JSP page processes the form submission. Server-side validation is
performed to ensure that all fields are filled in. If validation fails, an error message is displayed.
Otherwise, a success message is shown, indicating that the registration was successful
Output: