<form class="validated-form" novalidate onsubmit="validateForm(event)">
  <div class="input-group">
    <label class="input-label" for="vEmail">Email</label>
    <input class="input" id="vEmail" type="email" placeholder="you@example.com" oninput="validateEmail(this)" />
    <span class="field-msg" id="vEmailMsg"></span>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<style>
.field-msg { font-size: 0.75rem; margin-top: 0.25rem; }
.input.valid { border-color: #22C55E; }
.input.invalid { border-color: #EF4444; }
.field-msg.success { color: #16A34A; }
.field-msg.error { color: #DC2626; }
</style>

<script>
function validateEmail(input) {
  const msg = document.getElementById('vEmailMsg');
  const valid = /^[^s@]+@[^s@]+.[^s@]+$/.test(input.value);
  input.classList.toggle('valid', valid);
  input.classList.toggle('invalid', !valid && input.value.length > 0);
  if (valid) { msg.textContent = '✓ Looks good'; msg.className = 'field-msg success'; }
  else if (input.value.length > 0) { msg.textContent = 'Enter a valid email address'; msg.className = 'field-msg error'; }
  else { msg.textContent = ''; }
}
function validateForm(e) {
  e.preventDefault();
  validateEmail(document.getElementById('vEmail'));
}
</script>