Валидация email с помощью javaScript

Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока не будет правильно введен email.

Форма обязательно должна валидироваться еще и на сервере, иначе, отключив javaScript можно отправить любое содержимое вместо email.

Простой пример HTML (поле для ввода, кнопка и сообщение для вывода ошибки):

<form class="form" action="javascript:void(0)">
  <div class="form-row">
    <div class="form-col">
      <input type="text" class="email" placeholder="E-mail">
      <span class="error"></span>
    </div>
  </div>
  <button type="submit" class="btn-submit">Get Discount</button>
</form>

Функционал данной задачи поместился в 3 небольших функции. Код javaScript:

$(function() {
  $(".btn-submit").on("click", validate);

  // Validate email
  function validateEmail(email) {
    var re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    return re.test(String(email).toLowerCase());
  }
  
  // send form
  function sendForm() {
    $(".error").text("Form sending").fadeIn();
  }

  // validate email and send form after success validation
  function validate() {
    var email = $(".email").val();
    var $error = $(".error");
    $error.text("");

    if (validateEmail(email)) {
      $error.fadeOut();
      sendForm();
    } else {
      $error.fadeIn();
      $error.text(email + " is not valid");
    }
    return false;
  }
});

Рассмотрим чуть подробнее скрипт.

function validateEmail(email) – функция, которая проверяет соответствие строки email регулярному выражению, указанному в переменной re. В переменной re задана регулярка для шаблона email-почты.

function sendForm() – простой пример, чтобы показать, что форма отправлена, в рабочем примере здесь будет сообщение об успешной отправке и отправка формы.

function validate() – функция которая будет вызвана после нажатия на кнопку ".btn-submit". Будет провалидирован введенный в поле email, если он не соответствует регулярному выражению, то появится сообщение об ошибке, а если почта валидна, то форма будет отправлена и мы получим уведомление об успешной отправке почты.

Пример работы валидации email:

See the Pen simple validation email by javascript by Denis (@deniscreative) on CodePen.default