Back to CSS Banners & Alerts Inline Form Validation Alert CSS Pure CSS
Share
HTML 
<section class="ba-frm" aria-label="Inline form validation demo">
  <div class="form-shell" role="form" aria-label="Registration form">
    <div class="form-header">
      <span class="form-header-title">Create Account</span>
      <span class="form-header-meta">FORM · V2.4</span>
    </div>

    <div class="form-error-summary" role="alert" aria-live="polite">
      <div class="form-error-summary__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
      <div>
        <div class="form-error-summary__title">3 errors prevented submission</div>
        <ul class="form-error-summary__list">
          <li>Email address is already registered</li>
          <li>Password does not meet complexity requirements</li>
          <li>Terms of service must be accepted</li>
        </ul>
      </div>
    </div>

    <div class="form-body">
      <div class="field field--success">
        <div class="field-label">Full name <span class="required-mark">*</span><span class="field-index">01</span></div>
        <input class="field-input" type="text" value="Margot Vaillancourt" readonly>
        <div class="validation-msg validation-msg--success" data-code="OK_200">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Looks good</span><span class="validation-msg__detail">Name is valid and matches our formatting requirements.</span></div>
        </div>
      </div>

      <div class="field field--error">
        <div class="field-label">Email address <span class="required-mark">*</span><span class="field-index">02</span></div>
        <input class="field-input" type="email" value="[email protected]" readonly>
        <div class="validation-msg validation-msg--error" data-code="ERR_409">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Email already registered</span><span class="validation-msg__detail">An account with this address exists. Try signing in instead, or use a different email.</span></div>
        </div>
      </div>

      <div class="field field--warning">
        <div class="field-label">Password <span class="required-mark">*</span><span class="field-index">03</span></div>
        <input class="field-input" type="password" value="hunter2024" readonly>
        <div class="strength-bar" aria-hidden="true">
          <span class="filled-warning"></span><span class="filled-warning"></span><span></span><span></span>
        </div>
        <div class="validation-msg validation-msg--warning" data-code="WARN_PWD">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Weak password — strength: fair</span><span class="validation-msg__detail">Add uppercase letters, symbols, or increase length to 12+ characters for a stronger password.</span></div>
        </div>
      </div>

      <div class="field">
        <div class="field-label">Username <span class="field-index">04</span></div>
        <input class="field-input" type="text" placeholder="Choose a unique handle…" readonly>
        <div class="validation-msg validation-msg--hint" data-code="INFO">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Username requirements</span><span class="validation-msg__detail">3–20 characters. Letters, numbers, underscores only. Must not start with a number.</span></div>
        </div>
      </div>
    </div>

    <div class="form-footer">
      <p class="form-note">* Required fields.<br>Secure · Encrypted · No spam.</p>
      <button class="submit-btn" type="button">Submit →</button>
    </div>
  </div>
</section>
CSS 
/* ─── 05 Inline Form Validation Alert — brutalist industrial ──── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Syne:wght@700;800&display=swap');

.ba-frm {
  --ba-frm-bg: #f2f0ec; --ba-frm-surface: #ffffff; --ba-frm-ink: #111111; --ba-frm-muted: #888;
  --ba-frm-err-bg: #fff5f5; --ba-frm-err-line: #e02020; --ba-frm-err-text: #c00;
  --ba-frm-ok-bg: #f5fff8; --ba-frm-ok-line: #18a050; --ba-frm-ok-text: #0d7038;
  --ba-frm-warn-bg: #fffbf0; --ba-frm-warn-line: #e09000; --ba-frm-warn-text: #986000;
  --ba-frm-hint-bg: #f5f8ff; --ba-frm-hint-line: #3060d0; --ba-frm-hint-text: #204090;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--ba-frm-bg);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px), repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  font-family: 'IBM Plex Mono', monospace;
  box-sizing: border-box;
}
.ba-frm *, .ba-frm *::before, .ba-frm *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-frm .form-shell { background: var(--ba-frm-surface); border: 2px solid var(--ba-frm-ink); width: 100%; max-width: 520px; box-shadow: 6px 6px 0 var(--ba-frm-ink); position: relative; }
.ba-frm .form-header { background: var(--ba-frm-ink); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.ba-frm .form-header-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-frm .form-header-meta { font-size: 10px; opacity: 0.45; letter-spacing: 0.12em; }
.ba-frm .form-body { padding: 24px 24px 28px; }
.ba-frm .field { display: flex; flex-direction: column; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 18px 0; }
.ba-frm .field:first-child { padding-top: 0; } .ba-frm .field:last-child { border-bottom: none; }
.ba-frm .field-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ba-frm-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ba-frm .field-label .required-mark { color: var(--ba-frm-err-line); font-size: 11px; line-height: 1; }
.ba-frm .field-label .field-index { font-size: 9px; opacity: 0.3; margin-left: auto; font-weight: 400; }
.ba-frm .field-input { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 400; color: var(--ba-frm-ink); background: transparent; border: none; border-bottom: 2px solid var(--ba-frm-ink); padding: 6px 0 8px; outline: none; transition: border-color 0.2s; }
.ba-frm .field-input::placeholder { color: rgba(0,0,0,0.22); font-style: italic; }
.ba-frm .field--error .field-input { border-color: var(--ba-frm-err-line); }
.ba-frm .field--success .field-input { border-color: var(--ba-frm-ok-line); }
.ba-frm .field--warning .field-input { border-color: var(--ba-frm-warn-line); }

.ba-frm .validation-msg { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 10px; border-left: 3px solid; font-size: 11.5px; line-height: 1.55; position: relative; overflow: hidden; animation: ba-frm-popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ba-frm-popIn { from { opacity: 0; transform: translateY(-4px) scaleY(0.9); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.ba-frm .validation-msg::before { content: attr(data-code); position: absolute; top: 8px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.35; }
.ba-frm .validation-msg__icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ba-frm .validation-msg__icon svg { width: 15px; height: 15px; }
.ba-frm .validation-msg__title { font-weight: 700; margin-bottom: 2px; display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.ba-frm .validation-msg__detail { font-size: 11px; font-weight: 400; opacity: 0.8; font-style: italic; }

.ba-frm .validation-msg--error { background: var(--ba-frm-err-bg); border-color: var(--ba-frm-err-line); color: var(--ba-frm-err-text); }
.ba-frm .validation-msg--success { background: var(--ba-frm-ok-bg); border-color: var(--ba-frm-ok-line); color: var(--ba-frm-ok-text); }
.ba-frm .validation-msg--warning { background: var(--ba-frm-warn-bg); border-color: var(--ba-frm-warn-line); color: var(--ba-frm-warn-text); }
.ba-frm .validation-msg--hint { background: var(--ba-frm-hint-bg); border-color: var(--ba-frm-hint-line); color: var(--ba-frm-hint-text); }

.ba-frm .strength-bar { height: 3px; background: rgba(0,0,0,0.08); margin-top: 8px; display: flex; gap: 2px; overflow: hidden; }
.ba-frm .strength-bar span { flex: 1; background: #ddd; transition: background 0.3s; }
.ba-frm .strength-bar span.filled-warning { background: var(--ba-frm-warn-line); }

.ba-frm .form-footer { background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.08); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ba-frm .form-error-summary { background: #fff0f0; border: 2px solid var(--ba-frm-err-line); padding: 14px 16px; margin: 0 24px; display: flex; align-items: flex-start; gap: 12px; animation: ba-frm-popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; }
.ba-frm .form-error-summary__icon { color: var(--ba-frm-err-line); }
.ba-frm .form-error-summary__icon svg { width: 18px; height: 18px; }
.ba-frm .form-error-summary__title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-frm-err-text); margin-bottom: 6px; }
.ba-frm .form-error-summary__list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ba-frm .form-error-summary__list li { font-size: 11px; color: var(--ba-frm-err-text); display: flex; align-items: center; gap: 6px; opacity: 0.8; }
.ba-frm .form-error-summary__list li::before { content: '›'; font-size: 14px; line-height: 1; }
.ba-frm .submit-btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; background: var(--ba-frm-ink); color: #fff; border: 2px solid var(--ba-frm-ink); cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.ba-frm .submit-btn:hover { background: transparent; color: var(--ba-frm-ink); }
.ba-frm .form-note { font-size: 10px; color: var(--ba-frm-muted); letter-spacing: 0.06em; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .ba-frm .validation-msg, .ba-frm .form-error-summary { animation: none; } }