Function is not running. No error in the console log

Question

I'm trying to execute this function and well I can't get it to run. My console.logs are not running in the console at all. This function should validate emails on submit only for specific domain.

function emailValid() {
  console.log('first')

  var formInput = document.querySelectorAll('t186__input');
  console.log('input');
  var formSubmit = document.querySelectorAll('t-submit');
  console.log('submit');
  formSubmit.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('click');

    if (formInput.val().indexOf('@rbc.com') !== -1) {
      return true;
      console.log('hey2');
    } else {
      alert("You have entered an invalid email address");
      return false;
    }

  });

}

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule" value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000;" />
  </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Answer 1

Here, you have a number of errors. Corrected.

1/.

1. Do not need querySelectorAll
2. You wrapped your init code in a function, so never called.
3. Your querySelector was not using a . class modifier.

var formInput = document.querySelector('.t186__input');
console.log('input');
var formSubmit = document.querySelector('.t-submit');
console.log('submit');

formSubmit.addEventListener('click', function(e) {

  console.log('click');
  if (formInput.value.indexOf('@rbc.com') !== -1) {
    return true;
    console.log('hey2');
  } else {  
    e.preventDefault();
    alert("You have entered an invalid email address");
    return false;
  }


});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

A further tidy

document.addEventListener('click', function(e) {
  if (e.target.matches('.t-submit')) {
    let regEx = /@rbc.com/;
    if (regEx.test(document.querySelector('.t186__input').value) === false) {   
      e.preventDefault(); 
      e.stopPropagation();
      alert("You have entered an invalid email address");
      return false;
    }
  }
});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Wrapped in a from and deal with submit event. Have to assume there must be a form element in there somewhere :)

// In this example we need to wait for the DOM to be ready. 
document.addEventListener('DOMContentLoaded', () => {
  // Code in here will execute the the HTML is loaded and the DOM is ready for use.
  setUpFormListener('t_frmSubmit'); // <--- replace with your form class name
});

function setUpFormListener(frmClassName) {
  // In this demo, we bind directly to the form submit. (note we use form.[class] to ensure we only select the form
  document.querySelector(`form.${frmClassName}`)
    .addEventListener('submit', function(e) {
      let regEx = /@rbc.com/;
      if (regEx.test(document.querySelector('.t186__input').value) === false) {
        e.preventDefault();
        e.stopPropagation();
        alert("You have entered an invalid email address");
        return false;
      }
    });
}

<form class="t_frmSubmit" submit="_blank"> 

  <div class="t186__wrapper">
    <div class="t186__blockinput">
      <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
    <div class="t186__blockbutton">
      <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
    </div>
  </div>

</form>