README.md

Оригинальная статья находится на practical-web.ru

ARTICLE.html

<h1 id="как-проверить-все-input-type-email-на-странице-на-валидность-в-javascript">Как проверить все input type email на странице на валидность в JavaScript</h1>
<h2 id="если-вы-плохо-знаете-как-подклчать-скрипты-к-странице-html-можете-ознакомиться-со-статьёй">Если вы плохо знаете как подклчать скрипты к странице html, можете ознакомиться со статьёй</h2>
<p><a target="_blank" href="https://practical-web.ru/javascript/kak-mozhno-podklyuchit-skript-javascript-k-saytu" title="Как можно подключить скрипт JavaScript к сайту?">Как можно подключить скрипт JavaScript к сайту?</a>   </p>
<h2 id="1-как-практически-сделать-проверку-валидности-email-на-веб-странице">1. Как практически сделать проверку валидности email на веб странице</h2>
<ol>
<li>Допустим на странице у нас есть инпуты с типом email</li>
</ol>
<pre><code>&lt;input type=&quot;email&quot;&gt;
</code></pre>
<p>1.1 И добавим стиль ошибки для input type email в файл <code>main.css</code></p>
<pre><code>input[type=email]._error {
  color: red;
} 
</code></pre>
<ol start="2">
<li>В JavaScript коде <code>main.js</code> подключаем скрипт проверки валидности email из <code>helpers/checkEmailValid.js</code></li>
</ol>
<pre><code>import { checkEmailValid } from &quot;./helpers/checkEmailValid.js&quot;;
</code></pre>
<ol start="3">
<li>Потом при загрузке html структуры в браузере  </li>
<li>Находим все input type email на странице  </li>
<li>Обходим все эти инпуты   </li>
<li>Назначаем им прослушивание событий ввода с клавиатуры   </li>
<li><strong>Вот тут используем нашу функцию <code>checkEmailValid</code> для проверки email</strong> </li>
<li>Если значение в целевом input НЕ прошло валидацию в нашем скрипте <code>checkEmailValid.js</code> то присваивам класс ошибки к этому input   </li>
<li>Иначе снимаем класс ошибки с проверяемого input</li>
</ol>
<pre><code>// 3. Потом при загрузке html структуры в браузере
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    // 4. Находим все input type email на странице  
    const inputsEmail = document.querySelectorAll(&quot;input[type=email]&quot;);
    
    // 5. Обходим все эти инпуты
    inputsEmail.forEach((inputEmail) =&gt; {
    
        // 6. Назначаем им прослушивание событий ввода с клавиатуры
    inputEmail.addEventListener(&quot;input&quot;, function (e) {
    
      // 7. Вот тут используем нашу функцию `checkEmailValid` для проверки email  
      // 8. Если значение в целевом input НЕ прошло валидацию в нашем скрипте `checkEmailValid.js` то присваивам класс ошибки к этому input
      if (!checkEmailValid(e.target.value)) e.target.classList.add(&quot;_error&quot;);
      // 9. Иначе снимаем класс ошибки с проверяемого input  
      else e.target.classList.remove(&quot;_error&quot;);
    });
    
  });
});
</code></pre>
<h2 id="2-итого-у-нас-получается-такая-валидация-email-input">2. Итого у нас получается такая валидация email input</h2>
<p><img src="https://practical-web.ru/uploads/kak-proverit-vse-input-type-email-na-validnost-v-javascript/how-it-view.webp" alt="Итого у нас получается такая валидация email input">   </p>
<h2 id="3-весь-код-примера-находится-на-github-репозитории">3. Весь код примера находится на <a target="_blank" href="https://github.com/artemsites/kak-proverit-email-adres-na-validnost-v-javascript" title="GitHub репозитории">GitHub репозитории</a></h2>
<h2 id="4-пример-в-действии-можно-посмотреть-здесь">4. Пример в действии можно посмотреть <a target="_blank" href="https://practical-web.ru/demo/check-email-valid" title="Открыть пример в новой вкладке">здесь</a></h2>

ARTICLE.md

Как проверить все input type email на странице на валидность в JavaScript

Если вы плохо знаете как подклчать скрипты к странице html, можете ознакомиться со статьёй

Как можно подключить скрипт JavaScript к сайту?

1. Как практически сделать проверку валидности email на веб странице

1. Допустим на странице у нас есть инпуты с типом email

<input type="email">

1.1 И добавим стиль ошибки для input type email в файл main.css

input[type=email]._error {
  color: red;
} 

2. В JavaScript коде main.js подключаем скрипт проверки валидности email из helpers/checkEmailValid.js

import { checkEmailValid } from "./helpers/checkEmailValid.js";

3. Потом при загрузке html структуры в браузере
4. Находим все input type email на странице
5. Обходим все эти инпуты
6. Назначаем им прослушивание событий ввода с клавиатуры
7. Вот тут используем нашу функцию checkEmailValid для проверки email
8. Если значение в целевом input НЕ прошло валидацию в нашем скрипте checkEmailValid.js то присваивам класс ошибки к этому input
9. Иначе снимаем класс ошибки с проверяемого input

// 3. Потом при загрузке html структуры в браузере
document.addEventListener("DOMContentLoaded", function () {
	// 4. Находим все input type email на странице  
	const inputsEmail = document.querySelectorAll("input[type=email]");
	
	// 5. Обходим все эти инпуты
	inputsEmail.forEach((inputEmail) => {
	
		// 6. Назначаем им прослушивание событий ввода с клавиатуры
    inputEmail.addEventListener("input", function (e) {
    
      // 7. Вот тут используем нашу функцию `checkEmailValid` для проверки email  
      // 8. Если значение в целевом input НЕ прошло валидацию в нашем скрипте `checkEmailValid.js` то присваивам класс ошибки к этому input
      if (!checkEmailValid(e.target.value)) e.target.classList.add("_error");
      // 9. Иначе снимаем класс ошибки с проверяемого input  
      else e.target.classList.remove("_error");
    });
    
  });
});

2. Итого у нас получается такая валидация email input

3. Весь код примера находится на GitHub репозитории

4. Пример в действии можно посмотреть здесь

Видео-разбор статьи

[[youtube id="ajHidSGqq3w"]]

Сам код функции проверки валидности email по regexp совпадению

[[code code="https://api.cacher.io/raw/7cd2e008eb20bf69c40b/148d5d6967516cda2bc5/checkEmailIsValid.js"]]

checkEmailIsValid.js

/**
 * Как проверить все input type email на валидность в JavaScript     
 * @version 1.2 - 20.03.2024
 * @source https://gist.github.com/artemsites/b3a56ab32a3ba74eef9fbe540a693120#file-checkemailvalid-js
 * 
 * @returns {Boolean} Строка с email валидна или невалидна 
 */
export default function checkEmailIsValid(str) {
  if (str.search(/^[\w-.]*[@]{1}[\w-.]*\.[a-z]{2,}$/gi) === 0) return true
  return false
}

checkEmailIsValid.js.html

<h2>Сам код функции проверки валидности email по regexp совпадению</h2>