onBlur вызывает бесконечное число * oop предупреждений в Chrome

Question

Я должен сделать страницу HTML, с формой, содержащей адрес электронной почты и URL. Я должен проверить, является ли электронная почта законным Gmail или Yahoo! формат, и если URL-адрес правильный. Однако на Chrome, когда я набираю неправильный адрес электронной почты, затем, не исправляя его, нажимаю на ввод URL-адреса, я получаю бесконечные предупреждающие сообщения.

Вот файл HTML

<form action="/index.html" method="POST" name="form">
    <p>Full name:         <input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"></p>
    <p>Date:              <input type="date"></p>
    <p>Email:             <input type="email" id="email" onblur="validateEmail(document)"></p>
    <p>Favourite website: <input type="url"   id="url"   onblur="validateFavURL(document)"></p>
</form>

И вот файл JS:

function validateEmail(document) {
    let email = document.getElementById("email").value

    let regexGmail = /\S+@gmail\.\S+/
    let regexYahoo = /\S+@yahoo\.\S+/

    if (!regexGmail.test(email) || regexYahoo.test(email)) {
        alert("Incorrect email address!")
    }
}

function validateFavURL(document) {
    let url = document.getElementById("url").value

    let regexURL     = /https?:\/\/www\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+/
    let regextwodots = /^((?!\.\.).)+/   
    let regexdots    = /\..+\./

    if (!regexURL.test(url) || !regextwodots.test(url) || regexdots.test(url)) {
        alert("Incorrect webpage!")
    }
}

Answer 1

Я изменил некоторые ваши коды и добавил некоторые из них, теперь оповещение будет срабатывать с помощью смартов.

/*
  hasAlreadyAlerted is a boolean variable, from it's name you know that
  this variable will be false only if the elementy currently focusing on
  has not been alerted last time.

  alwertedElement is a reference to the last element that triggered the alert
*/
var hasAlreadyAlerted = false, alertedElement;
    document.querySelector("form").addEventListener('focus', (event) => 
      hasAlreadyAlerted = event.target == alertedElement, true);

    function validateEmail(emailElement) {
      let email = emailElement.value,
        regexGmail = /\S+@gmail\.\S+/,
        regexYahoo = /\S+@yahoo\.\S+/;

      if(!hasAlreadyAlerted && (!regexGmail.test(email) || regexYahoo.test(email))) {
        hasAlreadyAlerted = true;
        alertedElement = emailElement;
        alert("Incorrect email address!")
      }
    }

    function validateFavURL(urlElement) {
      let url = urlElement.value,
        regexURL = /https?:\/\/www\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+/,
        regextwodots = /^((?!\.\.).)+/,   
        regexdots = /\..+\./;

      if (!hasAlreadyAlerted && (!regexURL.test(url) || !regextwodots.test(url) || regexdots.test(url))) {
          hasAlreadyAlerted = true;
          alertedElement = document.getElementById("url");
          alert("Incorrect webpage!")
      }
    }
/*
  So if the user types a wrong email or url that triggers the alert and
  stores the reference of the element and that an alert has already triggerd,
  and no other alerts should be triggered from the same element unless the user
  has clicked in another one, this is all to avoid getting in an infinite loop
  like you have already seen, and the cause of that loop is just the way the 
  events are being handled, I thinks when the user types something and clicks 
  outside the input element the blur event is triggered and that triggers an 
  alert and once you click on the alert button the blur event is triggered once 
  again and so on making a an infinite number of alerts
*/

<form action="/index.html" method="POST" name="form">
    <p>Full name:        <input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"></p>
    <p>Dátum:            <input type="date"></p>
    <p>Email:            <input type="email" id="email" onblur="validateEmail(this)"></p>
    <p>Kedvenc weboldal: <input type="url" id="url" onblur="validateFavURL(this)"></p>
  </form>