Scribd
Upload
4 views

Lab 3

Uploaded by

kumarsatwik49
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Lab 3

Uploaded by

kumarsatwik49
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Date: Title

Exp. No: 03 JAVA SCRIPT

AIM OF THE EXPERIMENT:

Design the HTML form and validate all the fields (user name, password, email, phone no, pin
code) using java script.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>

<h2>Registration Form</h2>

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


<label for="username">Username:</label>
<input type="text" id="username" name="username">
<span id="usernameError" class="error"></span><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="passwordError" class="error"></span><br>

<label for="email">Email:</label>
<input type="text" id="email" name="email">
<span id="emailError" class="error"></span><br>

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


<input type="text" id="phone" name="phone">
<span id="phoneError" class="error"></span><br>

<label for="pincode">PIN Code:</label>


<input type="text" id="pincode" name="pincode">
<span id="pincodeError" class="error"></span><br>

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


</form>

<script>
function validateForm() {
// Reset error messages
resetErrors();

// Get form inputs


var username = document.getElementById('username').value.trim();
var password = document.getElementById('password').value.trim();
var email = document.getElementById('email').value.trim();
var phone = document.getElementById('phone').value.trim();
var pincode = document.getElementById('pincode').value.trim();

// Validate username
if (username === '') {
displayError('username', 'Username is required');
return false;
}

// Validate password
if (password === '') {
displayError('password', 'Password is required');
return false;
}

// Validate email
var emailRegex = /^\S+@\S+\.\S+$/;
if (!emailRegex.test(email)) {
displayError('email', 'Invalid email format');
return false;
}

// Validate phone number


var phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(phone)) {
displayError('phone', 'Invalid phone number');
return false;
}

// Validate PIN code


var pincodeRegex = /^\d{6}$/;
if (!pincodeRegex.test(pincode)) {
displayError('pincode', 'Invalid PIN code');
return false;
}

// If all validations pass, the form is submitted


alert('Form submitted successfully!');
return true;
}

function displayError(field, message) {


document.getElementById(field + 'Error').innerText = message;
}

function resetErrors() {
var errorFields = document.getElementsByClassName('error');
for (var i = 0; i < errorFields.length; i++) {
errorFields[i].innerText = '';
}
}
</script>

</body>
</html>

OUTPUT SCREENSHOT:

You might also like