Static Navigation 메뉴에서 테이블 데이터 추가시 입력값 체크

was-validated 클래스는 Bootstrap의 기능으로, 입력 필드를 유효성 검사 후에 스타일을 변경하여 사용자에게 유효성 검사 결과를 시각적으로 보여줄 수 있습니다. 이 클래스를 사용하면 클라이언트 측에서 간단하게 유효성 검사 결과를 표시할 수 있습니다.

아래는 was-validated 클래스를 활용한 예시입니다:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="name" class="form-label">이름</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">
      이름을 입력해주세요.
    </div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">이메일</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      올바른 이메일 주소를 입력해주세요.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">제출</button>
</form>

위의 예시에서 <form> 요소에 needs-validation 클래스를 추가하고, 입력 필드에 required 속성을 설정하여 필수 입력 필드로 지정합니다. 또한, 각 입력 필드의 아래에는 유효성 검사에 실패했을 때 보여줄 오류 메시지를 위한 <div> 요소가 있습니다. 이 <div> 요소에는 invalid-feedback 클래스를 추가하여 오류 메시지 스타일을 지정합니다.

JavaScript를 사용하여 폼 제출 시에 was-validated 클래스를 동적으로 추가하면, 입력 필드의 유효성 검사 결과에 따라 스타일이 변경됩니다. 아래는 jQuery를 사용한 예시입니다:

$(document).ready(function() {
  $('form').on('submit', function(event) {
    if (!this.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    $(this).addClass('was-validated');
  });
});

위의 JavaScript 코드는 폼 제출 시에 유효성 검사를 수행하고, 검사 결과에 따라 was-validated 클래스를 추가합니다. 이렇게 하면 유효성 검사에 실패한 입력 필드에 대해 스타일이 변경되어 사용자에게 오류를 시각적으로 보여줄 수 있습니다.

이와 같이 was-validated 클래스를 활용하여 Bootstrap을 이용한 입력 필드의 유효성 검사 결과를 표시할 수 있습니다.

eunja511005 / AutoCoding

Static Navigation 메뉴에서 테이블 데이터 추가시 입력값 체크 #78