INTERNET CONCEPTS AND WEB DESIGN MCSL 016
Previous question and answer for MCSL-016
Design an online application form in JavaScript for electrical connection which may have the following fields for data entry by the customers and do the appropriate coding of Submit button and validation checks :
• Permanent connection/Temporary connection — Check box
• Government house/Private house — Check box
• Name — Text box
• email — Text box
and a Submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electrical Connection Application Form</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>Electrical Connection Application Form</h2>
<form id="electricForm">
<div>
<label for="permanentConnection">Permanent Connection:</label>
<input type="checkbox" id="permanentConnection">
</div>
<div>
<label for="temporaryConnection">Temporary Connection:</label>
<input type="checkbox" id="temporaryConnection">
</div>
<div>
<label for="governmentHouse">Government House:</label>
<input type="checkbox" id="governmentHouse">
</div>
<div>
<label for="privateHouse">Private House:</label>
<input type="checkbox" id="privateHouse">
</div>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email">
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script>
document.getElementById('electricForm').addEventListener('submit', function(event) {
event.preventDefault();
// Validation
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var permanentConnection = document.getElementById('permanentConnection').checked;
var temporaryConnection = document.getElementById('temporaryConnection').checked;
var governmentHouse = document.getElementById('governmentHouse').checked;
var privateHouse = document.getElementById('privateHouse').checked;
var errors = [];
if (!name.trim()) {
errors.push('Name is required');
}
if (!email.trim()) {
errors.push('Email is required');
} else if (!isValidEmail(email)) {
errors.push('Please enter a valid email address');
}
if (!permanentConnection && !temporaryConnection) {
errors.push('Please select connection type');
}
if (!governmentHouse && !privateHouse) {
errors.push('Please select house type');
}
if (errors.length) {
document.getElementById('errorMessages').innerHTML = errors.join('<br>');
} else {
document.getElementById('errorMessages').innerHTML = '';
// Form submission code here
alert('Form submitted successfully');
}
});
function isValidEmail(email) {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
</script>
<div id="errorMessages" class="error"></div>
</body>
</html>