Form + Alert

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/button.css" />
<link rel="stylesheet" href="/guide/css/components/form.css" />
<link rel="stylesheet" href="/guide/css/components/alert.css" />

Live

이메일을 입력하고 구독하기를 눌러 Alert 피드백을 확인하세요.

구독 확인 메일이 발송됩니다.

Code

<form id="my-form" novalidate>
  <div class="form-group">
    <label class="label" for="email">이메일 <span class="label__required">*</span></label>
    <input class="input" id="email" type="email" placeholder="email@example.com" />
    <span class="helper-text">구독 확인 메일이 발송됩니다.</span>
  </div>
  <button class="button button--primary" type="submit">구독하기</button>
</form>

<div aria-live="polite">
  <div class="alert alert--success" id="alert-success" hidden role="alert">
    <div class="alert__bar"></div>
    <span class="alert__icon">✓</span>
    <div class="alert__content">
      <p class="alert__title">구독 완료</p>
      <p class="alert__text">입력하신 이메일로 확인 메일을 보냈습니다.</p>
    </div>
    <button class="alert__close" type="button" aria-label="닫기">×</button>
  </div>
  <div class="alert alert--error" id="alert-error" hidden role="alert">
    <div class="alert__bar"></div>
    <span class="alert__icon">✕</span>
    <div class="alert__content">
      <p class="alert__title">입력 오류</p>
      <p class="alert__text">올바른 이메일 주소를 입력해 주세요.</p>
    </div>
    <button class="alert__close" type="button" aria-label="닫기">×</button>
  </div>
</div>

<script>
var form = document.getElementById('my-form');
var alertSuccess = document.getElementById('alert-success');
var alertError   = document.getElementById('alert-error');

form.addEventListener('submit', function (e) {
  e.preventDefault();
  var emailInput = form.querySelector('[type="email"]');
  var val   = emailInput.value.trim();
  var valid = val.length > 0 && val.indexOf('@') > 0;

  alertSuccess.hidden = !valid;
  alertError.hidden   = valid;

  emailInput.classList.toggle('input--error',   !valid);
  emailInput.classList.toggle('input--success',  valid);
});

document.querySelectorAll('.alert__close').forEach(function (btn) {
  btn.addEventListener('click', function () {
    btn.closest('.alert').hidden = true;
  });
});
</script>