HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<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> 
<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>