Кнопка подписки с проверкой данных

<form class="row row-cols-lg-auto g-2 align-items-center justify-content-end">
    <div class="col-12" id="my_form">
    <input id="emailfield" type="email" class="form-control" placeholder="Ingresa tu Email" required="required">
    </div>

    <div class="col-12" id="thank_you" style="display: none;">
        Gracias por subscribirse!
        </div>
    <div class="col-12">
    <button type="submit" class="btn btn-primary-soft m-0" name="subscribirse" id="nextStep">Subscribirse</button>
    </div>

</form>

введите описание изображения здесь

что делает скрипт это скрывает элемент ввода и показывает сообщение "спасибо" это хорошо, но перед этим мне нужно, чтобы он проверял, если поле ввода email проверено. и показывал сообщение "спасибо" только если это произошло. Спасибо!

<script>
    
    var nextStep = document.querySelector('#nextStep');
    
    nextStep.addEventListener('click', function (e) {
      e.preventDefault()
      // Hide first view
      document.getElementById('my_form').style.display = 'none';
  
      // Show thank you message element
      document.getElementById('thank_you').style.display = 'block';
    });
  </script>

var nextStep = document.querySelector('#nextStep');

nextStep.addEventListener('click', function (e) {
  e.preventDefault()

  let inputEmail = document.querySelector('#emailfield')
  if (/.*\@.*\..*/.test(inputEmail.value)) {
    // validation passed


    // Hide first view
    document.getElementById('my_form').style.display = 'none';

    // Show thank you message element
    document.getElementById('thank_you').style.display = 'block';
  } else {
    // validation not passed
  }
});