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="[email protected]">
  <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;
   }

이렇게 하면 더 나은 시각적 피드백을 제공할 수 있습니다.

아래는 이 예시의 작동하는 데모입니다. 유효한 이메일로는 [email protected]만 허용됩니다.

🔗Demo