<form action="#">
  <label for="email">E-Mail</label>
  <input type="email" name="email" id="email" required>
  <button>Submit</button>
</form>

<div aria-live="assertive"></div>

html {
  font-family: sans-serif;
}

form {
  margin-bottom: 10px;
}

label {
  display: block;
  font-size: 1rem;
}

input {
  border: 2px solid #123456;
}

button {
  background: #123456;
  color: #FFF;
  border: none;
  padding: 4px 14px;
}

[aria-invalid] {
  border-color: #FA0000;
}

const email = document.querySelector('input')
const themeColor = document.querySelector('meta[name="theme-color"]')
const msg = document.querySelector('[aria-live]')
let color = '#FA0000'
let message = 'Error message'

document.querySelector('button').addEventListener('click', (e) => {
  e.preventDefault()

  email.reportValidity()

  email.setAttribute('aria-invalid', true)

  if (email.validity.valid) {
    color = '#00FF00'
    message = "Success message!"
    email.setAttribute('aria-invalid', false)
  }

  msg.textContent = message
  themeColor.setAttribute('content', color)
});