Regex: Email validation.

by Thomas Orthbandt

HTML

<!--
<label for="email">Email <span class="required">*</span></label><br>
<input id="Email" name="email" type="email" />
<span class="msg error">Error!</span>
<span class="msg success">Pass!</span>
-->

<div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
  <label id="label-email" class="" placeholder="Enter your Corporate Email" for="email">
    <span>Corporate Email</span>
    <span class="hs-form-required">*</span>
  </label>
  <div class="input">
    <input id="email" name="email" required="" placeholder="[email protected]" type="email" class="hs-input invalid error" inputmode="email" autocomplete="email" value="">
  </div>
  
  <ul class="no-list hs-error-msgs inputs-list" role="alert">
    <li>
      <label class="hs-error-msg hs-main-font-element">Please complete this required field.</label>
    </li>
    <li>
      <label class="hs-success-msg hs-main-font-element">Success</label>
    </li>
  </ul>
</div>

CSS

.hs-error-msgs {
  display: none;
}

.hs-form-required {
  color: red;
}

.hs-success-msg {
  color: green;
}

.hs-error-msg {
  color: red;
}

JavaScript

let component = {
  input: document.querySelector('input[name="email"]'),
  message: {
    fields: document.querySelector('.hs-error-msgs'),
    success: document.querySelector('.hs-success-msg'),
    error: document.querySelector('.hs-error-msg')
  }
};

let regex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;

component.input.addEventListener('blur', function() {
  // Hide all error messages initially
  component.message.fields.style.display = 'none';
  component.message.success.style.display = 'none';
  component.message.error.style.display = 'none';

  // Show the appropriate message based on the regex test
  if (regex.test(component.input.value)) {
    component.message.success.style.display = 'block';
  } else {
    component.message.error.style.display = 'block';
  }
  component.message.fields.style.display = 'block';
});