Web Tech-4
Web Tech-4
Name: Om Gupta
Experiment-4
AIM- Write programs using HTML and Javascript for validation
of input data.
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #f8f9fa;
margin: 0;
padding: 0;
.container {
max-width: 600px;
background-color: #fff;
padding: 30px;
border-radius: 8px;
h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
font-weight: bold;
color: #555;
padding: 12px;
font-size: 1rem;
margin-top: 5px;
border-radius: 4px;
border-color: #007bff;
outline: none;
.error {
color: #e74c3c;
font-size: 0.9rem;
margin-top: 5px;
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
padding: 15px;
font-size: 1rem;
margin-top: 20px;
cursor: pointer;
border-radius: 4px;
input[type="submit"]:hover {
background-color: #0056b3;
textarea {
resize: vertical;
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<label for="password">Password:</label>
<label for="address">Address:</label>
</form>
</div>
<script>
function validateForm() {
document.getElementById('nameError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
document.getElementById('phoneError').textContent = '';
document.getElementById('addressError').textContent = '';
isValid = false;
isValid = false;
isValid = false;
} else if (!emailPattern.test(email)) {
isValid = false;
}
// Validate Password (must be at least 8 characters, including one letter and one number)
isValid = false;
} else if (!passwordPattern.test(password)) {
isValid = false;
isValid = false;
else if (!phonePattern.test(phone)) {
isValid = false;
isValid = false;
return isValid;
</script>
</body>
</html>
Output-