onBlur causes infinite loop of alert messages in Chrome

Question

I have to make a HTML page, with a form containing an email address and a URL. I should check whether the email is a legitimate Gmail or Yahoo, format. and if the URL is correct as well, However, on Chrome, when I type a wrong email, then without correcting it I click into the URL's input. I get infinite alert messages.

Here's the HTML file

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

And heres the JS file:

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

I have changed some of your code and added some of mine, now the alert will be triggered with smart.

 /* 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="[AZ][az]+ [AZ][az]+"></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>