Inline Validation

이 μ˜ˆμ‹œλŠ” 이메일 μ£Όμ†Œμ˜ 인라인 ν•„λ“œ μœ νš¨μ„± 검사λ₯Ό μˆ˜ν–‰ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ μœ νš¨μ„±μ„ 검사할 값을 μ„œλ²„μ— POSTν•˜κ³ , κ·Έ 결과둜 DOM을 μ—…λ°μ΄νŠΈν•˜λŠ” μž…λ ₯ ν•„λ“œκ°€ μžˆλŠ” 폼을 λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€.

λ‹€μŒκ³Ό 같은 폼으둜 μ‹œμž‘ν•©λ‹ˆλ‹€:

<h3>Signup Form</h3>
<form hx-post="/contact">
  <div hx-target="this" hx-swap="outerHTML">
    <label>Email Address</label>
    <input name="email" hx-post="/contact/email" hx-indicator="#ind">
    <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
  </div>
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" name="firstName">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" class="form-control" name="lastName">
  </div>
  <button class="btn primary">Submit</button>
</form>

폼의 첫 번째 divλŠ” μš”μ²­μ˜ νƒ€κ²ŸμœΌλ‘œ μ„€μ •λ˜μ–΄ 있으며, outerHTML μŠ€μ™‘ μ „λž΅μ΄ μ§€μ •λ˜μ–΄ μžˆμ–΄ 응닡에 μ˜ν•΄ μ™„μ „νžˆ κ΅μ²΄λ©λ‹ˆλ‹€. μž…λ ₯ ν•„λ“œλŠ” λ³€κ²½ μ΄λ²€νŠΈκ°€ λ°œμƒν•  λ•Œ μœ νš¨μ„± 검사λ₯Ό μœ„ν•΄ /contact/email둜 POSTλ₯Ό 보내도둝 μ§€μ •λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€(이것이 μž…λ ₯ ν•„λ“œμ˜ κΈ°λ³Έ λ™μž‘μž…λ‹ˆλ‹€). λ˜ν•œ, μš”μ²­μ— λŒ€ν•œ 인디케이터λ₯Ό μ§€μ •ν•©λ‹ˆλ‹€.

μš”μ²­μ΄ λ°œμƒν•˜λ©΄, λ°”κΉ₯ divλ₯Ό κ΅μ²΄ν•˜λŠ” λΆ€λΆ„ 응닡을 λ°˜ν™˜ν•©λ‹ˆλ‹€. κ·Έ μ˜ˆμ‹œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€:

<div hx-target="this" hx-swap="outerHTML" class="error">
  <label>Email Address</label>
  <input name="email" hx-post="/contact/email" hx-indicator="#ind" value="test@foo.com">
  <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
  <div class='error-message'>That email is already taken. Please enter another email.</div>
</div>

이 divλŠ” error 클래슀둜 주석이 달렀 있으며, 였λ₯˜ λ©”μ‹œμ§€ μš”μ†Œλ₯Ό ν¬ν•¨ν•©λ‹ˆλ‹€.

이 폼은 λ‹€μŒ CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ κ°„λ‹¨νžˆ μŠ€νƒ€μΌλ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€:

  .error-message {
    color:red;
  }
  .error input {
      box-shadow: 0 0 3px #CC0000;
   }
  .valid input {
      box-shadow: 0 0 3px #36cc00;
   }

μ΄λ ‡κ²Œ ν•˜λ©΄ 더 λ‚˜μ€ μ‹œκ°μ  ν”Όλ“œλ°±μ„ μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ•„λž˜λŠ” 이 μ˜ˆμ‹œμ˜ μž‘λ™ν•˜λŠ” 데λͺ¨μž…λ‹ˆλ‹€. μœ νš¨ν•œ μ΄λ©”μΌλ‘œλŠ” test@test.com만 ν—ˆμš©λ©λ‹ˆλ‹€.

Server Requests ↑ Show

πŸ”—Demo