Athabasca University | AU Student/Staff Login | Invited Guest Login
QUICK COURSE LINKS: Add blog post - Read latest group posts - Course Moodle site
FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc : Accessing your web space at AU : Podcasts for each unit
Updated resource pages: Unit 1 - Unit 2 - Unit 3 - Units 4 & 5 - Unit 6 - Unit 7
Important notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit, and my posts on the subject in the discussion forum for further information about the problem.
Testing of a new server is in progress: if you would like to get early access and you are unafraid of working with command lines, network settings, and conf files, please contact Gerald Abshez, asking to be part of the trial.
JavaScript program design(s): Revision
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Form Validation</title>
<style>
.error-message {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span id="emailError" class="error-message"></span><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="passwordError" class="error-message"></span><br><br>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
// Prevent the form from submitting
event.preventDefault();
// Get form input values
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Reset error messages
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
// Validate email
if (!isValidEmail(email)) {
document.getElementById('emailError').textContent = 'Invalid email format';
}
// Validate password
if (!isValidPassword(password)) {
document.getElementById('passwordError').textContent = 'Password must be at least 8 characters';
}
// If all validations pass, submit the form
if (isValidEmail(email) && isValidPassword(password)) {
alert('Form submitted successfully!');
// You can also submit the form programmatically here:
// document.getElementById('myForm').submit();
}
});
// Function to validate email format
function isValidEmail(email) {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// Function to validate password length
function isValidPassword(password) {
return password.length >= 8;
}
</script>
</body>
</html>
COMP 266
History
-
JavaScript program design(s)
Revision created February 26, 2024 - 9:58pm by Ashutosh Singh -
JavaScript program design(s)
Revision created February 26, 2024 - 9:55pm by Ashutosh Singh
