0

What the script does is hide the input element and show the "thanks message". But prior to this I need it to validate if input emailfield is validated, and show the "thanks message" only if that happens. Thanks!

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';
});
<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>

enter image description here

lejlun
  • 4,140
  • 2
  • 15
  • 31
Ramiro Lopez
  • 5
  • 1
  • It depends on how exact validation you want to have you can use regexp from [here](https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression) or just write this `.*\@.*\..*` – ZloiGoroh Oct 01 '21 at 12:35

1 Answers1

0
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
  }
});

Instead of this regexp you can use any that you want

ZloiGoroh
  • 411
  • 4
  • 11