Scribd
Upload
20 views6 pages

Web Tech-4

practicle 2 web tech

Uploaded by

aayush2310008-d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views6 pages

Web Tech-4

practicle 2 web tech

Uploaded by

aayush2310008-d
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Roll No:2200271690031

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">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Professional Form Validation</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

margin: 0;

padding: 0;

.container {

max-width: 600px;

margin: 50px auto;

background-color: #fff;

padding: 30px;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

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;

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea {

padding: 12px;

font-size: 1rem;

margin-top: 5px;

border-radius: 4px;

border: 1px solid #ccc;

transition: all 0.3s ease;

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus,


textarea:focus {

border-color: #007bff;

outline: none;

box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

.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;

transition: background-color 0.3s ease;

input[type="submit"]:hover {

background-color: #0056b3;

textarea {

resize: vertical;

</style>

</head>

<body>

<div class="container">

<h2>Registration Form</h2>

<form id="registrationForm" onsubmit="return validateForm()">

<label for="name">Full Name:</label>

<input type="text" id="name" name="name">

<div id="nameError" class="error"></div>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email">

<div id="emailError" class="error"></div>

<label for="password">Password:</label>

<input type="password" id="password" name="password">

<div id="passwordError" class="error"></div>

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone">

<div id="phoneError" class="error"></div>

<label for="address">Address:</label>

<textarea id="address" name="address" rows="4"></textarea>

<div id="addressError" class="error"></div>


<input type="submit" value="Submit">

</form>

</div>

<script>

function validateForm() {

let isValid = true;

// Clear previous error messages

document.getElementById('nameError').textContent = '';

document.getElementById('emailError').textContent = '';

document.getElementById('passwordError').textContent = '';

document.getElementById('phoneError').textContent = '';

document.getElementById('addressError').textContent = '';

// Validate Name (must not be empty and at least 3 characters)

const name = document.getElementById('name').value;

if (name === '') {

document.getElementById('nameError').textContent = 'Full name is required';

isValid = false;

} else if (name.length < 3) {

document.getElementById('nameError').textContent = 'Full name must be at least 3 characters';

isValid = false;

// Validate Email (must match email format)

const email = document.getElementById('email').value;

const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (email === '') {

document.getElementById('emailError').textContent = 'Email address is required';

isValid = false;

} else if (!emailPattern.test(email)) {

document.getElementById('emailError').textContent = 'Invalid email format';

isValid = false;

}
// Validate Password (must be at least 8 characters, including one letter and one number)

const password = document.getElementById('password').value;

const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

if (password === '') {

document.getElementById('passwordError').textContent = 'Password is required';

isValid = false;

} else if (!passwordPattern.test(password)) {

document.getElementById('passwordError').textContent = 'Password must be at least 8 characters long and


contain at least one letter and one number';

isValid = false;

// Validate Phone Number (must be a valid 10-digit phone number)

const phone = document.getElementById('phone').value;

const phonePattern = /^[0-9]{10}$/;

if (phone === '') {

document.getElementById('phoneError').textContent = 'Phone number is required';

isValid = false;

else if (!phonePattern.test(phone)) {

document.getElementById('phoneError').textContent = 'Phone number must be 10 digits';

isValid = false;

// Validate Address (must not be empty)

const address = document.getElementById('address').value;

if (address === '') {

document.getElementById('addressError').textContent = 'Address is required';

isValid = false;

return isValid;

</script>

</body>

</html>
Output-

You might also like