时间戳

首页 > 解决方案 > 函数未运行。控制台日志中没有错误

javascript - 函数未运行。控制台日志中没有错误

问题描述

我正在尝试执行此功能，但我无法让它运行。我的 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>

标签： javascriptformsfunctionvalidation

解决方案

在这里，您有许多错误。已更正。

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>

包裹在 from 并处理提交事件。必须假设某处必须有一个表单元素:)

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

推荐阅读