Validation form HTML với onsubmit và JavaScript

Gán hàm validation vào onsubmit của form, trả về false để chặn submit nếu validation fail.

Ví dụ: Validate input phải là "gmail"

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
</head>
<body>
    <form onsubmit="return validateForm()" method="GET" action="https://mail.google.com/mail/">
        <br/>
        <input type="text" id="txtInput" placeholder="Nhập gmail" />
        <input type="submit" value="Tìm kiếm" />
    </form>

    <script>
        function validateForm() {
            var value = document.getElementById('txtInput').value;
            var isValid = (value === 'gmail');
            
            if (!isValid) {
                alert('Vui lòng nhập "gmail" vào ô text!');
                return false; // Chặn submit
            }
            return true; // Cho phép submit
        }
    </script>
</body>
</html>

Cách chạy

Lưu index.html, mở Live Server.

Kết quả

• Nhập "gmail" → Submit thành công, chuyển đến Gmail
• Nhập khác → Alert cảnh báo, form KHÔNG submit

Best practices:

• Dùng addEventListener('submit', ...) thay onsubmit attribute
• Validate cả client-side và server-side
• Hiển thị lỗi inline thay vì alert()
• Dùng required, pattern, type="email" HTML5 validation