Submit Form trong JavaScript

• Trần Thị Vân
• 1689
• 26/08/2025

Chức năng của Submit Form trong JavaScript

Submit Form trong JavaScript dùng để kiểm tra dữ liệu của người dùng nhập vào trước khi gửi yêu cầu đến máy chủ.

Code Submit Form trong JavaScript

<form action="" method="POST"  id="idform" >
<input type="text"  id="email" name="email" placeholder="Nhập email"><br>
<input type="password" name="matkhau" id="matkhau" placeholder="Nhập mật khẩu"><br>
<input type="submit" value="ĐĂNG NHẬP">
</form>
<script>
const idform = document.getElementById('idform');

    idform.addEventListener('submit', function(event) {
        event.preventDefault(); // Ngăn chặn gửi biểu mẫu mặc định

        // Kiểm tra email
        const email = document.getElementById('email').value;
        if (email.trim() === '') {
            alert('Email không được để trống!');
            return; // Dừng nếu không hợp lệ
        }
         // Kiểm tra mật khẩu
        const matkhau = document.getElementById('matkhau').value;
        if (matkhau.trim() === '') {
            alert('Mật khẩu không được để trống!');
            return; // Dừng nếu không hợp lệ
        }
        // Dữ liệu sẽ được gửi tới máy chủ nếu kiểm tra hợp lệ
        idform.submit();
    });
</script>

Chạy Thử

Cách Xử Lý Form Khi Người Dùng Nhấn Submit

Khi người dùng nhấn nút gửi, JavaScript có thể tiếp nhận dữ liệu của form để kiểm tra trước khi cho phép gửi đi. Cách này giúp phát hiện thông tin thiếu hoặc sai ngay trên trình duyệt, đồng thời tránh gửi những dữ liệu chưa đạt yêu cầu.

Quy trình thường gồm ba bước: lắng nghe sự kiện submit, kiểm tra dữ liệu và quyết định có tiếp tục gửi form hay không.

Ngăn Form Gửi Khi Dữ Liệu Chưa Hợp Lệ

Để ngăn trình duyệt gửi form, có thể sử dụng preventDefault() bên trong hàm xử lý sự kiện. Khi phát hiện dữ liệu không hợp lệ, phương thức này sẽ dừng hành động gửi mặc định của form.

form.addEventListener('submit', function(event) {
    if (!duLieuHopLe) {
        event.preventDefault();
    }
});

Cách làm này đặc biệt hữu ích khi cần hiển thị thông báo lỗi ngay tại form thay vì để người dùng gửi dữ liệu rồi mới phát hiện vấn đề.

Kiểm Tra Dữ Liệu Trước Khi Submit

Trước khi cho phép gửi, JavaScript có thể kiểm tra các trường quan trọng như họ tên, email, số điện thoại hoặc mật khẩu. Mỗi điều kiện nên tập trung vào một yêu cầu cụ thể để việc xử lý và hiển thị lỗi dễ kiểm soát.

form.addEventListener('submit', function(event) {
    const email = emailInput.value.trim();

    if (email === '') {
        event.preventDefault();
        alert('Vui lòng nhập email.');
    }
});

Nên dùng trim() khi kiểm tra dữ liệu dạng văn bản để loại bỏ khoảng trắng thừa ở đầu và cuối. Với các dữ liệu quan trọng, có thể kết hợp thêm điều kiện phù hợp thay vì chỉ kiểm tra trường có rỗng hay không.

Gửi Form Sau Khi Kiểm Tra Thành Công

Nếu toàn bộ điều kiện đều đạt, JavaScript có thể để form tiếp tục thực hiện hành động gửi mặc định. Khi đó, không gọi preventDefault() trong trường hợp hợp lệ.

form.addEventListener('submit', function(event) {
    const email = emailInput.value.trim();

    if (email === '') {
        event.preventDefault();
        alert('Vui lòng nhập email.');
        return;
    }

    // Form tiếp tục được gửi khi dữ liệu hợp lệ
});

Cách xử lý này tạo ra luồng rõ ràng: dữ liệu sai thì dừng lại, còn dữ liệu hợp lệ thì tiếp tục gửi. Với những form phức tạp hơn, có thể thay phần gửi mặc định bằng fetch() để gửi dữ liệu đến máy chủ mà không cần tải lại trang.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Submit Form trong JavaScript.