What Should Be Avoided
A login form is available for accessing a web application. If a user submits the form with any empty or incorrect input values, the corresponding field will be highlighted with a red border.
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incorrect form validation Implementation</title>
<style>
.invalid {
border: 1px solid red;
}
</style>
</head>
<body>
<form name="signup" id="signup">
<div>
<label for="username">Username (required)</label><br>
<input type="text" name="username" id="username">
</div>
<div>
<label for="password">Password (required)</label><br>
<input type="password" name="password" id="password">
</div>
<div>
<label for="confirmPassword">Confirm Password (required)</label><br>
<input type="password" name="confirmPassword" id="confirmPassword">
</div>
<div>
<input type="submit" name="button" id="button" value="Submit">
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('signup');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
// Remove existing error styles
var invalidFields = document.querySelectorAll('.invalid');
invalidFields.forEach(function(field) {
field.classList.remove('invalid');
});
// Check each input field for validity
var username = document.getElementById('username').value.trim();
var password = document.getElementById('password').value.trim();
var confirmPassword = document.getElementById('confirmPassword').value.trim();
var isValid = true;
if (username === '') {
document.getElementById('username').classList.add('invalid');
isValid = false;
}
if (password === '') {
document.getElementById('password').classList.add('invalid');
isValid = false;
}
if (confirmPassword === '') {
document.getElementById('confirmPassword').classList.add('invalid');
isValid = false;
}
if (password !== confirmPassword) {
document.getElementById('password').classList.add('invalid');
document.getElementById('confirmPassword').classList.add('invalid');
isValid = false;
}
// Optionally, you can add more validation logic here
// If there are errors, prevent form submission
if (!isValid) {
return false;
}
// If no errors, you can optionally submit the form
// form.submit(); // Uncomment this line to submit the form
});
});
</script>
</body>
</html>
Explanation:This approach lacks a direct and accessible method for users to identify and correct errors. Relying only on color to indicate errors means users who cannot perceive visual cues will struggle to understand the form's feedback. This approach does not meet success criteria 3.3.1 for error identification as it does not provide alternative methods for conveying errors to all users, including those relying on assistive technologies.