<label for="username">Username:&nbsp;
  <input type="text" id="username" name="username" required /></label>

body {
  display: grid;
  height: 100vh;
  place-items: center;
  background: #424b52;
}

label {
  font-weight: bold;
  font-family: sans-serif;
  color: white;
}

const form = document.getElementById('form');
const usernameInput = document.getElementById('username');

// Simulating the database of existing usernames
const existingUsernames = ['john_doe', 'jane_doe', 'bob_smith'];

function validateUsername() {
  const username = this.value;
  if (existingUsernames.includes(username)) {
    this.setCustomValidity('Username already exists.');
  } else {
    this.setCustomValidity('');
  }
  this.reportValidity();
}

usernameInput.addEventListener('input', validateUsername);
usernameInput.addEventListener('blur', validateUsername);