Lỗi ngay tại ô nhập
Dùng để nói ngay dưới ô nhập rằng vì sao nội dung vừa nhập chưa hợp lệ.
Xem trước trực tiếp
Nguồn
<div class="dc-field">
<label class="dc-field__label" for="dc-ie-phone">휴대전화 번호</label>
<input class="dc-field__input dc-field__input--bad" id="dc-ie-phone" name="phone" type="tel" value="010-1234" autocomplete="tel" aria-invalid="true" aria-describedby="dc-ie-phone-msg">
<p class="dc-field__msg dc-field__msg--bad" id="dc-ie-phone-msg">
<svg class="dc-field__msg-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 1.4a6.6 6.6 0 1 0 0 13.2A6.6 6.6 0 0 0 8 1.4Zm.8 10.2H7.2V10h1.6v1.6Zm0-3H7.2V4.2h1.6v4.4Z"/></svg>
<span>번호 11자리를 모두 입력해 주세요. 예) 010-1234-5678</span>
</p>
</div>.dc-field {
display: flex; flex-direction: column; gap: var(--dc-2);
max-width: 360px;
font-family: var(--dc-font);
}
.dc-field__label { font-size: 13px; font-weight: 600; color: var(--dc-text); }
.dc-field__input {
height: 44px; padding: 0 var(--dc-3);
border: 1px solid var(--dc-line-field);
border-radius: var(--dc-r-sm);
background: var(--dc-surface);
color: var(--dc-text);
font-size: 15px;
}
.dc-field__input--bad {
border-width: 2px; border-color: var(--dc-danger);
box-shadow: 0 0 0 3px var(--dc-danger-soft);
}
.dc-field__msg {
display: flex; align-items: flex-start; gap: var(--dc-2);
margin: 0; font-size: 13px; line-height: 1.55;
}
.dc-field__msg-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: currentColor; }
.dc-field__msg--bad { color: var(--dc-danger); font-weight: 600; }
.dc-field__msg--ok { color: var(--dc-ok); }
.dc-errform {
display: flex; flex-direction: column; gap: var(--dc-5);
max-width: 440px;
font-family: var(--dc-font);
}
.dc-errsum {
max-width: 440px; padding: var(--dc-4);
border: 1px solid color-mix(in srgb, var(--dc-danger) 40%, transparent);
border-left: 4px solid var(--dc-danger);
border-radius: var(--dc-r-sm);
background: var(--dc-danger-soft);
font-family: var(--dc-font);
}
.dc-errsum__title { margin: 0 0 var(--dc-2); font-size: 14px; font-weight: 700; color: var(--dc-text); }
.dc-errsum__list { display: flex; flex-direction: column; gap: var(--dc-1); margin: 0; padding: 0; list-style: none; }
.dc-errsum__link { display: inline-block; font-size: 13px; color: var(--dc-danger); text-decoration: underline; }Cách dùng
- Hãy nói nên nhập gì, chứ không chỉ nói sai gì — kèm một ví dụ
- Kiểm tra khi người dùng rời ô, đừng đợi đến lúc bấm gửi
- Nếu nhiều ô sai, đặt bản tổng hợp ở trên và liên kết tới từng ô
Điểm cần lưu ý
- Chỉ viền đỏ thì người mù màu không thấy — phải có chữ và biểu tượng
- Thiếu aria-invalid và aria-describedby thì trình đọc màn hình không đọc lỗi