Trang chủ » Kiến thức Website » Kiến thức Kỹ thuật Website » Kiến thức Frontend » Kiến thức HTML » Validate Form trong HTML: Hướng dẫn toàn diện & Code mẫu

Validate Form trong HTML: Hướng dẫn toàn diện & Code mẫu

ĐĂNG VÀO 23/11/2025 BỞI Lý Văn Hiếu

Bạn đã bao giờ mệt mỏi vì người dùng nhập sai thông tin vào form liên hệ hay đăng ký chưa? Việc validate form trong HTML chính là giải pháp đơn giản nhưng cực kỳ mạnh mẽ giúp bạn giải quyết vấn đề này. Thay vì phải viết những đoạn JavaScript phức tạp, HTML5 cung cấp sẵn các công cụ để kiểm tra dữ liệu ngay trên trình duyệt. Hãy cùng WiWeb tìm hiểu toàn bộ cách thức hoạt động và áp dụng chúng vào dự án của bạn ngay hôm nay.

Validate Form trong HTML là gì?

Khi xây dựng một website, form (biểu mẫu) là cầu nối quan trọng giữa bạn và người dùng. Nhưng làm thế nào để đảm bảo dữ liệu nhận về luôn chính xác? Đây chính là lúc kỹ thuật validate form vào cuộc.

Khái niệm Validation phía Client (Client-side)

Hiểu đơn giản, Client-side validation là quá trình kiểm tra dữ liệu người dùng nhập vào form ngay tại trình duyệt của họ, trước khi dữ liệu được gửi lên máy chủ (server). Nó giống như một người gác cổng kiểm tra vé ngay tại cửa, thay vì để khách vào trong rồi mới phát hiện không có vé.

Ví dụ, khi người dùng quên nhập email hoặc nhập sai định dạng, một thông báo lỗi sẽ hiện ra ngay lập tức. Điều này giúp họ sửa lỗi nhanh chóng và cải thiện trải nghiệm người dùng đáng kể.

Lợi ích của HTML5 Native Validation so với JavaScript thuần

Trước đây, để làm được điều này, lập trình viên thường phải viết các đoạn mã JavaScript khá dài dòng. Tuy nhiên, với sự ra đời của validate form HTML5, mọi thứ đã trở nên đơn giản hơn rất nhiều.

Thay vì tự xây dựng, bạn chỉ cần thêm vài thuộc tính đơn giản vào thẻ HTML. Dưới đây là những lợi ích vượt trội:

Nhanh và nhẹ: Trình duyệt xử lý trực tiếp, không cần tải thêm thư viện JavaScript cồng kềnh.
Dễ triển khai: Chỉ cần thêm thuộc tính vào thẻ input, không cần viết logic phức tạp.
Trải nghiệm tốt hơn: Phản hồi lỗi tức thì cho người dùng, giúp họ không phải chờ đợi trang tải lại.
Hoạt động ngay cả khi JavaScript bị tắt: Đây là một lớp phòng vệ cơ bản luôn hoạt động.

*Validate Form trong HTML là gì và tại sao quan trọng?*

Các thuộc tính Validate Form cơ bản trong HTML5

HTML5 mang đến một bộ công cụ mạnh mẽ để bạn bắt đầu validate form mà không cần một dòng JavaScript nào. Hãy cùng xem qua những thuộc tính cơ bản và hữu ích nhất nhé.

Thuộc tính required

Đây là thuộc tính phổ biến nhất. Khi bạn thêm required vào một thẻ input, trình duyệt sẽ không cho phép người dùng gửi form nếu trường đó bị bỏ trống. Rất đơn giản nhưng cực kỳ hiệu quả.

Ví dụ về thuộc tính required trong html:

<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username" required>

Kiểm tra định dạng tự động với input type

HTML5 thông minh hơn bạn nghĩ. Chỉ cần khai báo đúng type cho thẻ input, trình duyệt sẽ tự động kiểm tra định dạng giúp bạn:

type="email": Tự động kiểm tra xem chuỗi nhập vào có cấu trúc của một email hợp lệ không (ví dụ: name@example.com).
type="url": Đảm bảo giá trị nhập vào là một URL hợp lệ.
type="number": Chỉ cho phép nhập số.

Đây là ví dụ về input type email validation:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Kiểm soát độ dài và giá trị

Bạn cũng có thể dễ dàng kiểm soát số lượng ký tự hoặc giá trị của dữ liệu đầu vào:

minlength và maxlength: Quy định độ dài tối thiểu và tối đa cho các trường văn bản.
min và max: Quy định giá trị nhỏ nhất và lớn nhất cho các trường số (type="number").

Ví dụ, yêu cầu mật khẩu phải có ít nhất 8 ký tự:

<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" minlength="8" required>

*Các thuộc tính Validate Form cơ bản trong HTML5*

Sử dụng thuộc tính Pattern để kiểm tra dữ liệu phức tạp

Các thuộc tính cơ bản rất tuyệt, nhưng đôi khi bạn cần kiểm tra những định dạng phức tạp hơn như số điện thoại hay mật khẩu mạnh. Đây là lúc thuộc tính pattern trong html tỏa sáng.

Thuộc tính pattern trong HTML

Thuộc tính pattern cho phép bạn sử dụng một Biểu thức chính quy (Regular Expression – Regex) để định nghĩa một mẫu mà giá trị nhập vào phải tuân theo. Nếu dữ liệu không khớp với mẫu này, trình duyệt sẽ báo lỗi. Đây là công cụ linh hoạt nhất cho việc validation.

Cách validate số điện thoại và email bằng Regex

Định dạng số điện thoại ở Việt Nam rất đa dạng. Bạn có thể dùng pattern để đảm bảo người dùng nhập đúng. Dưới đây là cách validate số điện thoại html:

<label for="phone">Số điện thoại:</label>
<input type="tel" id="phone" name="phone"
       pattern="(0[3|5|7|8|9])+([0-9]{8})\b"
       title="Nhập số điện thoại hợp lệ của Việt Nam (10 số).">

Regex trên kiểm tra số điện thoại bắt đầu bằng các đầu số di động phổ biến và có tổng cộng 10 chữ số.

Đối với email, dù type="email" đã khá tốt, nhưng nếu bạn có yêu cầu khắt khe hơn (ví dụ: chỉ chấp nhận email của một công ty), pattern là lựa chọn hoàn hảo.

Kiểm tra mật khẩu mạnh

Bảo mật là ưu tiên hàng đầu. Bạn có thể yêu cầu người dùng đặt mật khẩu mạnh bằng pattern regex html. Ví dụ, mật khẩu phải có ít nhất 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt:

<label for="password">Mật khẩu mạnh:</label>
<input type="password" id="password" name="password"
       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,}"
       title="Mật khẩu phải chứa ít nhất 8 ký tự, gồm chữ hoa, chữ thường, số, và ký tự đặc biệt.">

Bạn thấy không? Sức mạnh của pattern là không giới hạn.

*Sử dụng thuộc tính Pattern để kiểm tra dữ liệu phức tạp*

Tùy biến thông báo lỗi Validate Form

Validation của HTML5 rất tiện lợi, nhưng có một điểm trừ: thông báo lỗi mặc định của trình duyệt thường khá chung chung và không thân thiện. May mắn là chúng ta có thể tùy biến chúng.

Hạn chế của thông báo lỗi mặc định trình duyệt

Mỗi trình duyệt (Chrome, Firefox, Safari) lại hiển thị một thông báo lỗi khác nhau. Ngôn ngữ của thông báo cũng phụ thuộc vào cài đặt của trình duyệt người dùng. Điều này tạo ra trải nghiệm không đồng nhất và thiếu chuyên nghiệp.

Sử dụng setCustomValidity trong JavaScript để đổi nội dung thông báo

Đây là lúc chúng ta cần một chút trợ giúp từ JavaScript. Constraint Validation API cung cấp một phương thức gọi là setCustomValidity(). Bạn có thể dùng nó để đặt một thông báo lỗi của riêng mình.

Cách hoạt động rất đơn giản: Khi một input không hợp lệ, bạn gọi input.setCustomValidity('Nội dung lỗi của bạn ở đây'). Nếu input hợp lệ, bạn phải gọi input.setCustomValidity('') để xóa thông báo lỗi.

Đây là một ví dụ về custom validation message html cho trường tên đăng nhập:

<input type="text" id="username" required oninvalid="this.setCustomValidity('Bạn ơi, đừng để trống tên đăng nhập nhé!')" oninput="this.setCustomValidity('')">

Cách tắt validate mặc định với thuộc tính novalidate

Trong trường hợp bạn muốn tự xây dựng toàn bộ logic validation bằng JavaScript mà không muốn trình duyệt can thiệp, hãy thêm thuộc tính novalidate vào thẻ <form>:

<form action="/submit" method="post" novalidate>
  <!-- Các trường input ở đây -->
</form>

Khi đó, mọi quy tắc validation của HTML5 sẽ bị vô hiệu hóa, và bạn có toàn quyền kiểm soát.

*Tùy biến thông báo lỗi Validate Form (Custom Message)*

Trang trí trạng thái Form bằng CSS

Một form tốt không chỉ hoạt động đúng mà còn phải trông đẹp mắt. CSS cung cấp các lớp giả (pseudo-classes) đặc biệt để bạn có thể thay đổi giao diện của các trường input dựa trên trạng thái hợp lệ của chúng.

Sử dụng pseudo-classes :valid và :invalid

Đây là hai lớp giả cơ bản và mạnh mẽ nhất:

:valid: Được áp dụng khi dữ liệu trong input hợp lệ theo các quy tắc đã đặt ra (ví dụ: nhập đúng định dạng email).
:invalid: Được áp dụng khi dữ liệu không hợp lệ.

Bạn có thể dùng chúng để thêm viền xanh cho input hợp lệ và viền đỏ cho input không hợp lệ:

input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

Pseudo-classes :placeholder-shown và :user-invalid cho UX tốt hơn

Một vấn đề nhỏ với :invalid là nó sẽ áp dụng ngay khi trang vừa tải, khiến tất cả các trường required đều có viền đỏ. Điều này không tốt cho trải nghiệm người dùng.

Để khắc phục, chúng ta kết hợp với các lớp giả khác:

:placeholder-shown: Trạng thái khi input chưa được nhập gì và placeholder đang hiển thị.
:user-invalid: Một lớp giả mới hơn, chỉ kích hoạt khi người dùng đã tương tác và để lại input ở trạng thái không hợp lệ.

Cách kết hợp thông minh:

/* Chỉ hiển thị viền đỏ khi người dùng đã nhập liệu và nhập sai */
input:not(:placeholder-shown):invalid {
  border-color: red;
}

Hiệu ứng rung hoặc đổi màu khi nhập sai dữ liệu

Để thu hút sự chú ý của người dùng hơn nữa, bạn có thể thêm một hiệu ứng animation đơn giản khi input không hợp lệ. Ví dụ, một hiệu ứng rung nhẹ:

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

input:invalid {
  animation: shake 0.2s ease-in-out;
}

Cách này vừa trực quan vừa không gây khó chịu cho người dùng.

*Styling: Trang trí trạng thái Form bằng CSS*

UX và Accessibility

Validate form không chỉ là về kỹ thuật, mà còn là về việc tạo ra trải nghiệm tốt cho tất cả người dùng.

Đảm bảo tính truy cập cho người dùng khiếm thị với ARIA

Người dùng sử dụng trình đọc màn hình cần biết khi nào một trường là bắt buộc hoặc đang bị lỗi. Bạn có thể sử dụng các thuộc tính ARIA (Accessible Rich Internet Applications) để cung cấp thông tin này:

aria-required="true": Cho trình đọc màn hình biết đây là trường bắt buộc.
aria-invalid="true": Báo hiệu rằng trường hiện tại có lỗi.
aria-describedby: Liên kết một input với một phần tử chứa thông báo lỗi, để trình đọc màn hình có thể đọc to thông báo đó.

Khi nào nên hiển thị lỗi: Ngay lập tức (Inline) hay khi Submit?

Đây là một câu hỏi quan trọng về UX:

Inline Validation (Kiểm tra ngay lập tức): Hiển thị lỗi ngay sau khi người dùng rời khỏi một trường (onblur event). Ưu điểm là phản hồi nhanh. Nhược điểm là có thể gây khó chịu nếu báo lỗi quá sớm.
On Submit Validation (Kiểm tra khi gửi): Chỉ kiểm tra tất cả các trường khi người dùng nhấn nút Gửi. Ưu điểm là không làm phiền người dùng trong quá trình nhập liệu. Nhược điểm là họ phải quay lại sửa nhiều lỗi cùng lúc.

Một chiến lược cân bằng là: chỉ hiển thị thông báo hợp lệ (dấu tick xanh) ngay lập tức, nhưng chỉ hiển thị thông báo lỗi sau lần submit đầu tiên hoặc khi người dùng đã nhập và xóa trống.

Tại sao Validate HTML chưa đủ và cần Server-side?

Đây là điều cực kỳ quan trọng: Client-side validation (HTML, CSS, JS) chỉ là để cải thiện trải nghiệm người dùng, không phải để bảo mật.

Người dùng có chuyên môn có thể dễ dàng vô hiệu hóa JavaScript hoặc sửa mã HTML trên trình duyệt để bỏ qua mọi rào cản validation của bạn và gửi dữ liệu độc hại lên máy chủ. Do đó, bạn luôn phải thực hiện một lớp kiểm tra dữ liệu thứ hai ở phía máy chủ (Server-side validation). Lớp phòng vệ này là bắt buộc để đảm bảo an toàn và toàn vẹn dữ liệu.

*Chiến lược nâng cao: UX và Accessibility (A11y)*

Ví dụ thực tế: Xây dựng Form đăng ký hoàn chỉnh

Lý thuyết là vậy, giờ hãy cùng WiWeb áp dụng tất cả vào một ví dụ thực tế nhé. Chúng ta sẽ xây dựng một form đăng ký đơn giản nhưng đầy đủ các kỹ thuật đã học.

Code HTML cấu trúc Form

Chúng ta sẽ có các trường: tên, email, mật khẩu, và xác nhận mật khẩu. Chúng ta sẽ dùng required, type, minlength, và pattern.

<form id="register-form" novalidate>
    <div class="form-group">
        <label for="username">Tên người dùng:</label>
        <input type="text" id="username" name="username" required minlength="3">
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="password">Mật khẩu:</label>
        <input type="password" id="password" name="password" required 
               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
               title="Ít nhất 8 ký tự, gồm chữ hoa, thường và số.">
    </div>
    <div class="form-group">
        <label for="confirm_password">Xác nhận mật khẩu:</label>
        <input type="password" id="confirm_password" name="confirm_password" required>
        <span class="error-message" id="password-error"></span>
    </div>
    <button type="submit">Đăng ký</button>
</form>

Code CSS trang trí giao diện và trạng thái lỗi

CSS sẽ giúp làm nổi bật các trường hợp lệ và không hợp lệ, mang lại phản hồi trực quan cho người dùng.

.form-group input:invalid:not(:placeholder-shown) {
    border: 2px solid red;
}
.form-group input:valid {
    border: 2px solid green;
}
.error-message {
    color: red;
    font-size: 0.9em;
}

Code JavaScript xử lý logic kiểm tra cuối cùng

Chúng ta sẽ dùng một chút JavaScript để xử lý logic phức tạp hơn, ví dụ như check password match html (kiểm tra mật khẩu xác nhận có khớp không).

const form = document.getElementById('register-form');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm_password');
const passwordError = document.getElementById('password-error');

form.addEventListener('submit', function(event) {
    if (password.value !== confirmPassword.value) {
        event.preventDefault(); // Ngăn form gửi đi
        passwordError.textContent = 'Mật khẩu xác nhận không khớp!';
        confirmPassword.style.borderColor = 'red';
    } else {
        passwordError.textContent = '';
    }
});

Với ba mảnh ghép này, bạn đã có một form đăng ký hoàn chỉnh, vừa thân thiện với người dùng, vừa đảm bảo dữ liệu đầu vào cơ bản.

*Ví dụ thực tế: Xây dựng Form đăng ký hoàn chỉnh*

Lời kết

Việc validate form trong HTML là một kỹ năng nền tảng nhưng vô cùng quan trọng đối với bất kỳ nhà phát triển web nào. Bằng cách tận dụng các thuộc tính có sẵn của HTML5, kết hợp với một chút CSS và JavaScript, bạn có thể tạo ra những biểu mẫu thông minh, thân thiện và an toàn hơn.

Bạn đã áp dụng kỹ thuật validate nào trong các dự án của mình chưa? Hãy chia sẻ kinh nghiệm hoặc bất kỳ câu hỏi nào ở phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị để thiết kế website chuyên nghiệp, tối ưu từ giao diện đến trải nghiệm người dùng, WiWeb luôn sẵn sàng đồng hành cùng bạn. Liên hệ với chúng tôi để được tư vấn chi tiết nhé!

5/5 - (140 Đánh giá)

Lý Văn Hiếu

Anh Hiếu là chuyên gia có tư duy tổng thể, kết hợp nền tảng kỹ thuật lập trình (PHP, MySQL, WordPress, Flatsome) từ ĐH Công nghệ Thông tin (UIT) với chiến lược SEO sắc bén (kinh nghiệm từ GOBRANDING). Anh hiện đang dẫn dắt cả hai team Web và SEO tại WiWeb & WIFIM, đảm bảo mọi website ra đời đều là một cỗ máy tối ưu hoàn hảo cho cả người dùng và Google.

Bình luận