Функция не работает. Нет ошибок в журнале консоли

Question

Я пытаюсь выполнить эту функцию, и я не могу заставить ее работать.Мои console.logs не работают в консоли вообще.Эта функция должна проверять электронную почту при отправке только для определенного домена.

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

Здесь у вас есть ряд ошибок. Исправлено.

1 /.

1. Не нужно querySelectorAll
2. Вы завернули свой код инициализации в функцию, поэтому никогда не вызывались.
3. Ваш querySelector не использовал модификатор класса ..

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>

Еще одна приборка

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>

Завернут в от и имеют дело с отправкой события. Должен предположить, что где-то там должен быть элемент формы:)

// 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>

Answer 2

querySelectorAll('t186__input') и querySelectorAll('t-submit') ищет элементы с тегами <t186__input и <t-submit.

На основе ваших HTML это классы для элементов.Так что используйте class селектор

querySelectorAll('.t186__input') и querySelectorAll('.t-submit')

Также querySelectorAll возвращает массив узлов, поэтому вам придется сначала выполнить итерации по ним, чтобы получить доступ к каждому элементу.

Если вы ожидаете, что только один элемент с этим классом будет использовать querySelector.

Также вы только что определили функцию, но нигде не вызываете функцию emailvalid.