0Pricing
HTML Academy · 강의

novalidate 속성

직접 처리할 때 브라우저 유효성 검사 비활성화하기

novalidate 속성은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

브라우저 유효성 검사 제한 사항

HTML5에 내장된 유효성 검사에는 제한 사항이 있습니다:

  • 오류 메시지가 브라우저에 따라 달라지고 스타일을 지정하기 어렵습니다
  • 유효성 검사는 제출할 때만 실행되며, 포커스를 잃거나 입력할 때는 실행되지 않습니다
  • 복잡한 비즈니스 규칙(비밀번호 일치, 사용자 이름 중복 여부)을 적용할 수 없습니다

완전히 제어하려면 novalidate를 사용해 내장된 유효성 검사를 비활성화하십시오.

form의 novalidate

form에 novalidate를 추가하면 모든 브라우저 유효성 검사가 비활성화됩니다:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

novalidate를 사용하는 이유

브라우저 유효성 검사를 비활성화하는 일반적인 이유는 다음과 같습니다:

  • 디자인 시스템에 맞는 사용자 지정 오류 메시지 스타일
  • 실시간 유효성 검사(제출할 때만이 아니라 포커스를 잃거나 입력할 때)
  • 여러 필드에 걸친 유효성 검사(예: 비밀번호 확인)
  • 리디렉션 후 서버 측 오류 표시
  • 타사 유효성 검사 라이브러리(Zod, Yup, React Hook Form)

사용자 지정 유효성 검사 패턴

novalidate를 사용해 사용자 지정 유효성 검사를 구현합니다:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

버튼의 formnovalidate

form 전체에 novalidate를 설정하지 않고 특정 제출 버튼의 유효성 검사만 비활성화합니다:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

사용자 지정 오류 스타일 지정

사용자 지정 유효성 검사 오류 스타일 지정:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

접근 가능한 사용자 지정 오류

사용자 지정 오류 메시지에 접근할 수 있도록 만드십시오:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

유효성 검사 시점 전략

novalidate를 사용할 때 유효성 검사를 실행할 시점:

  • 제출할 때 — 가장 간단하며 한 번에 모두 검사합니다
  • 포커스를 잃을 때 — 사용자가 필드를 벗어날 때마다 검사합니다
  • 입력할 때 — 실시간으로 검사합니다. 사용자 경험은 가장 좋지만 지나치게 엄격하게 느껴질 수 있습니다
  • 혼합 방식 — 포커스를 잃을 때 검사하고 입력할 때 오류를 지웁니다

포커스 해제 + 입력 혼합 패턴

가장 사용자 친화적인 유효성 검사 방식입니다:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate와 서버 유효성 검사

서버 측에서도 항상 유효성 검사를 실행하십시오:

  • 클라이언트 측 유효성 검사는 사용자 경험을 위한 것입니다
  • 서버 측 유효성 검사는 보안을 위한 것입니다
  • 사용자는 요청을 수정해 HTML 유효성 검사를 우회할 수 있습니다
  • novalidate와 사용자 지정 JS 유효성 검사는 서버 규칙을 그대로 반영해야 합니다

유효성 검사 라이브러리

novalidate와 함께 사용할 수 있는 인기 있는 JavaScript 유효성 검사 라이브러리:

  • Zod — TypeScript 우선 스키마 유효성 검사
  • Yup — 객체 스키마 유효성 검사
  • Valibot — 가벼운 스키마 라이브러리
  • React Hook Form — React를 위한 양식 상태 관리 및 유효성 검사

사용자 지정 유효성 검사 테스트

사용자 지정 양식 유효성 검사를 테스트하는 방법:

  • 빈 상태로 제출하는 경우를 테스트합니다(필수 필드)
  • 잘못된 형식을 테스트합니다(잘못된 이메일, 잘못된 전화번호 패턴)
  • 경계 사례를 테스트합니다(공백만 입력, 유니코드, 매우 긴 문자열)
  • 화면 낭독기로 테스트해 오류 알림을 확인합니다
  • 오류가 표시된 후 필드 사이를 키보드로 이동하는 동작을 테스트합니다

빠른 확인

버튼의 formnovalidate는 어떤 동작을 하나요?

복습: novalidate

novalidate의 핵심:

  • novalidate를 form에 설정하면 모든 브라우저 유효성 검사가 비활성화됩니다
  • formnovalidate를 버튼에 설정하면 해당 제출 작업에서만 유효성 검사가 비활성화됩니다
  • 사용자 경험을 제어하고 복잡한 규칙을 적용하려면 사용자 지정 유효성 검사를 사용합니다
  • 항상 서버 측에서도 유효성 검사를 실행해야 합니다. 클라이언트 측 유효성 검사는 우회할 수 있습니다
  • role="alert"와 aria-invalid를 사용해 오류를 접근 가능한 방식으로 알립니다

자주 묻는 질문

“novalidate 속성” 강의는 무료인가요?

네 — “novalidate 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“novalidate 속성”에서 뭘 배우나요?

직접 처리할 때 브라우저 유효성 검사 비활성화하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“novalidate 속성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. required pattern min max 및 maxlength
  2. novalidate 속성
  3. 제약 조건 유효성 검사 API 기초
  4. HTML5와 JavaScript 유효성 검사의 장단점
← HTML Academy(으)로 돌아가기