<div>
<pre>
<input type="text" id="firstName" placeholder="First Name" onblur="validateFirstName()">
<input type="text" id="lastName" placeholder="Last Name">
<div id="error" style="color: red;"></div> <!-- Display error message here -->
<script>
function validateFirstName() {
var input = document.getElementById('firstName');
var errorDiv = document.getElementById('error');
// Allow only letters and spaces, must not be empty
var nameRegex = /^[A-Za-z ]+$/;
if (!nameRegex.test(input.value)) {
errorDiv.textContent = 'Please enter a valid first name.'; // Display error message
input.style.backgroundColor = 'salmon'; // Set background to salmon on invalid input
input.focus(); // Keep focus on the first name input to encourage correction
} else {
input.style.backgroundColor = 'white'; // Reset background to white on valid input
errorDiv.textContent = ''; // Clear error message
document.getElementById('lastName').focus(); // Optionally move focus to the last name input
}
}
</script>
</pre>
</div>