Xử lý Forms trong JavaScript

JavaScript HTML DOM | 15/04/2025 by Học Javascript

Forms (biểu mẫu) là một phần quan trọng trong các trang web, giúp người dùng nhập và gửi dữ liệu như đăng ký tài khoản, đăng nhập, tìm kiếm thông tin, hoặc liên hệ với quản trị viên. Tuy nhiên, để đảm bảo dữ liệu được nhập đúng và xử lý hiệu quả, JavaScript đóng vai trò quan trọng trong việc thao tác với Forms.

Với JavaScript, chúng ta có thể:

Lấy dữ liệu từ Form một cách linh hoạt.
Kiểm tra dữ liệu nhập vào trước khi gửi để tránh lỗi.
Xử lý sự kiện khi người dùng nhập dữ liệu.
Gửi dữ liệu lên server mà không cần tải lại trang.

Bài viết này sẽ hướng dẫn chi tiết cách xử lý Forms bằng JavaScript, giúp bạn xây dựng những biểu mẫu thông minh, thân thiện với người dùng và đảm bảo tính chính xác của dữ liệu.

Truy cập và lấy dữ liệu từ Form trong JavaScript

Trong JavaScript, chúng ta có thể dễ dàng truy cập vào Form và lấy dữ liệu từ các trường nhập liệu để xử lý. Điều này rất quan trọng khi cần kiểm tra, xác thực và gửi dữ liệu lên server.

Truy cập Form bằng JavaScript

Có nhiều cách để truy cập một Form trong JavaScript:

Sử dụng `document.forms["formName"]`

Phương pháp này truy cập Form dựa trên thuộc tính name của nó.

Ví dụ:

<form name="myForm">
    <input type="text" name="username">
</form>

<script>
    let form = document.forms["myForm"];
    console.log(form); // Trả về đối tượng Form
</script>

Sử dụng `document.getElementById("formId")`

Cách này phổ biến hơn, dùng id để truy cập Form.

Ví dụ:

<form id="loginForm">
    <input type="text" name="email">
</form>

<script>
    let form = document.getElementById("loginForm");
    console.log(form); // Trả về đối tượng Form
</script>

Lấy dữ liệu từ các trường nhập liệu

Sau khi truy cập Form, chúng ta cần lấy dữ liệu từ các ô nhập liệu bên trong nó.

Lấy giá trị từ Input (Text, Email, Password, Number,...)

Cách đơn giản nhất để lấy giá trị từ input là sử dụng .value.

Ví dụ:

<input type="text" id="username" value="John Doe">

<script>
    let username = document.getElementById("username").value;
    console.log(username); // "John Doe"
</script>

Sử dụng `querySelector()` để lấy giá trị

Chúng ta có thể lấy phần tử bằng querySelector() với selector CSS.

Ví dụ:

<input type="text" name="fullname" value="Alice">

<script>
    let fullname = document.querySelector("input[name='fullname']").value;
    console.log(fullname); // "Alice"
</script>

Lấy giá trị từ Checkbox và Radio Button

Lấy giá trị của Checkbox

Checkbox có thể được chọn hoặc không, vì vậy cần kiểm tra thuộc tính checked.

Ví dụ:

<input type="checkbox" id="subscribe" checked>

<script>
    let isChecked = document.getElementById("subscribe").checked;
    console.log(isChecked); // true
</script>

Lấy giá trị của Radio Button

Với radio button, cần kiểm tra nút nào đang được chọn.

Ví dụ:

<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female

<script>
    let gender = document.querySelector("input[name='gender']:checked").value;
    console.log(gender); // "Male"
</script>

Lấy giá trị từ Dropdown (Select Box)

Dropdown (thẻ <select>) có nhiều tùy chọn, chúng ta cần lấy giá trị của tùy chọn được chọn.

Ví dụ:

<select id="city">
    <option value="Hanoi">Hà Nội</option>
    <option value="Saigon" selected>TP. Hồ Chí Minh</option>
    <option value="Danang">Đà Nẵng</option>
</select>

<script>
    let selectedCity = document.getElementById("city").value;
    console.log(selectedCity); // "Saigon"
</script>

Kiểm tra dữ liệu nhập vào (Form Validation) trong JavaScript

Form validation là quá trình kiểm tra dữ liệu trước khi gửi để đảm bảo người dùng nhập đúng thông tin. Điều này giúp tránh lỗi, cải thiện trải nghiệm người dùng và bảo mật hệ thống. Có hai cách chính để kiểm tra dữ liệu nhập vào:

Xác thực bằng HTML: Sử dụng các thuộc tính như required, maxlength, pattern,...
Xác thực bằng JavaScript: Kiểm tra dữ liệu với if...else, biểu thức chính quy (regex),...

Kiểm tra dữ liệu trước khi gửi

1. Xác thực bằng thuộc tính HTML

HTML cung cấp các thuộc tính giúp kiểm tra dữ liệu mà không cần JavaScript.

Ví dụ:

<form>
    <input type="text" id="username" required minlength="3" maxlength="20">
    <input type="email" id="email" required>
    <input type="password" id="password" required pattern=".{6,}">
    <button type="submit">Gửi</button>
</form>

Giải thích:

required: Bắt buộc nhập dữ liệu.
minlength="3" / maxlength="20": Giới hạn số ký tự.
pattern=".{6,}": Kiểm tra độ dài mật khẩu tối thiểu 6 ký tự.

Lưu ý: Xác thực bằng HTML tiện lợi nhưng có giới hạn, không kiểm tra logic phức tạp.

Xác thực bằng JavaScript

Dùng JavaScript để kiểm tra dữ liệu nhập vào và hiển thị thông báo lỗi.

Ví dụ:

<form onsubmit="return validateForm()">
    <input type="text" id="username" placeholder="Nhập tên">
    <input type="email" id="email" placeholder="Nhập email">
    <input type="password" id="password" placeholder="Nhập mật khẩu">
    <button type="submit">Gửi</button>
</form>

<script>
    function validateForm() {
        let username = document.getElementById("username").value;
        let email = document.getElementById("email").value;
        let password = document.getElementById("password").value;

        if (username.length < 3) {
            alert("Tên phải có ít nhất 3 ký tự!");
            return false;
        }

        let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
        if (!email.match(emailPattern)) {
            alert("Email không hợp lệ!");
            return false;
        }

        if (password.length < 6) {
            alert("Mật khẩu phải có ít nhất 6 ký tự!");
            return false;
        }

        return true;
    }
</script>

Giải thích:

Kiểm tra độ dài tên bằng if (username.length < 3).
Dùng regex để kiểm tra email.
Kiểm tra mật khẩu phải có ít nhất 6 ký tự.

Kiểm tra dữ liệu theo loại input

Kiểm tra ô nhập văn bản (`input[type="text"]`)

Đảm bảo không để trống.
Giới hạn độ dài.

let username = document.getElementById("username").value;
if (username.trim() === "") {
    alert("Tên không được để trống!");
}

Kiểm tra email (`input[type="email"]`)

Dùng biểu thức chính quy (regex) để kiểm tra định dạng email.

let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!email.match(emailPattern)) {
    alert("Email không hợp lệ!");
}

Kiểm tra số điện thoại (`input[type="tel"]`)

Chỉ cho phép nhập số và kiểm tra đúng định dạng.

let phonePattern = /^[0-9]{10,11}$/;
if (!phone.match(phonePattern)) {
    alert("Số điện thoại không hợp lệ!");
}

Kiểm tra mật khẩu (`input[type="password"]`)

Đảm bảo độ dài tối thiểu.
Kiểm tra có chữ hoa, chữ thường, số và ký tự đặc biệt.

let passwordPattern = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/;
if (!password.match(passwordPattern)) {
    alert("Mật khẩu phải có ít nhất 6 ký tự, chứa chữ hoa, số và ký tự đặc biệt!");
}

Hiển thị thông báo lỗi

Thêm thông báo lỗi bằng `document.createElement("span")`

Chúng ta có thể tạo thẻ <span> để hiển thị lỗi ngay bên dưới ô nhập.

Ví dụ:

<form onsubmit="return validate()">
    <input type="text" id="username" placeholder="Nhập tên">
    <span id="usernameError" style="color: red;"></span>
    <button type="submit">Gửi</button>
</form>

<script>
    function validate() {
        let username = document.getElementById("username").value;
        let errorSpan = document.getElementById("usernameError");

        if (username.length < 3) {
            errorSpan.textContent = "Tên phải có ít nhất 3 ký tự!";
            return false;
        } else {
            errorSpan.textContent = "";
        }

        return true;
    }
</script>

Giải thích:

Khi nhập sai, hiển thị lỗi trong thẻ <span>.
Nếu nhập đúng, xoá thông báo lỗi.

Hiển thị lỗi ngay khi nhập (`oninput`, `onchange`)

Thay vì chỉ kiểm tra khi nhấn nút gửi, có thể kiểm tra trong lúc nhập dữ liệu.

Ví dụ:

<input type="password" id="password" placeholder="Nhập mật khẩu" oninput="checkPassword()">
<span id="passwordError" style="color: red;"></span>

<script>
    function checkPassword() {
        let password = document.getElementById("password").value;
        let errorSpan = document.getElementById("passwordError");

        if (password.length < 6) {
            errorSpan.textContent = "Mật khẩu phải có ít nhất 6 ký tự!";
        } else {
            errorSpan.textContent = "";
        }
    }
</script>

Giải thích:

Dùng oninput để kiểm tra mật khẩu ngay khi người dùng nhập.
Hiển thị lỗi nếu mật khẩu chưa đủ dài.

Xử lý sự kiện trong Form trong JavaScript\

Khi làm việc với Form trong JavaScript, các sự kiện giúp theo dõi và kiểm soát hành động của người dùng. Điều này giúp cải thiện trải nghiệm người dùng và đảm bảo dữ liệu nhập vào đúng định dạng trước khi gửi đi.

Sự kiện quan trọng trong Form

Dưới đây là các sự kiện quan trọng khi làm việc với Form:

`onsubmit` – Xử lý khi form được gửi

Sự kiện onsubmit được kích hoạt khi người dùng nhấn nút "Gửi" trong Form. Nó thường được dùng để kiểm tra dữ liệu trước khi gửi.

Ví dụ: Ngăn chặn gửi form nếu dữ liệu chưa hợp lệ.

<form id="myForm">
    <input type="text" id="username" placeholder="Nhập tên">
    <button type="submit">Gửi</button>
</form>

<script>
    document.getElementById("myForm").onsubmit = function(event) {
        let username = document.getElementById("username").value;

        if (username.trim() === "") {
            alert("Tên không được để trống!");
            event.preventDefault(); // Ngăn chặn gửi form nếu dữ liệu sai
        }
    };
</script>

Giải thích:

Nếu người dùng không nhập tên, form sẽ không được gửi.
event.preventDefault() giúp ngăn chặn hành động gửi form mặc định.

`oninput` – Xử lý khi người dùng nhập dữ liệu

Sự kiện oninput kích hoạt mỗi khi người dùng nhập hoặc xoá dữ liệu. Nó thường dùng để kiểm tra dữ liệu trực tiếp khi nhập.

Ví dụ: Hiển thị lỗi ngay khi người dùng nhập sai.

<input type="email" id="email" placeholder="Nhập email" oninput="validateEmail()">
<span id="emailError" style="color: red;"></span>

<script>
    function validateEmail() {
        let email = document.getElementById("email").value;
        let errorSpan = document.getElementById("emailError");
        let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

        if (!email.match(emailPattern)) {
            errorSpan.textContent = "Email không hợp lệ!";
        } else {
            errorSpan.textContent = "";
        }
    }
</script>

Giải thích:

Kiểm tra email ngay khi nhập.
Nếu sai định dạng, hiển thị lỗi trong <span>.

`onchange` – Xử lý khi giá trị ô nhập thay đổi

Sự kiện onchange kích hoạt khi người dùng thay đổi giá trị và rời khỏi ô nhập liệu.

Ví dụ: Kiểm tra số điện thoại khi người dùng nhập xong.

<input type="tel" id="phone" placeholder="Nhập số điện thoại" onchange="validatePhone()">
<span id="phoneError" style="color: red;"></span>

<script>
    function validatePhone() {
        let phone = document.getElementById("phone").value;
        let errorSpan = document.getElementById("phoneError");
        let phonePattern = /^[0-9]{10,11}$/;

        if (!phone.match(phonePattern)) {
            errorSpan.textContent = "Số điện thoại không hợp lệ!";
        } else {
            errorSpan.textContent = "";
        }
    }
</script>

Giải thích:

Khi người dùng nhập xong và rời khỏi ô số điện thoại, kiểm tra dữ liệu.
Nếu không đúng định dạng, hiển thị lỗi.

`onfocus` / `onblur` – Khi input được chọn / mất focus

onfocus: Kích hoạt khi người dùng bấm vào ô nhập.
onblur: Kích hoạt khi người dùng rời khỏi ô nhập.

Ví dụ: Đổi màu viền khi ô nhập được chọn.

<input type="text" id="fullname" placeholder="Nhập họ tên" onfocus="highlight(this)" onblur="removeHighlight(this)">

<script>
    function highlight(element) {
        element.style.border = "2px solid blue";
    }

    function removeHighlight(element) {
        element.style.border = "";
    }
</script>

Giải thích:

Khi ô nhập được chọn (onfocus), viền chuyển sang màu xanh.
Khi rời khỏi ô nhập (onblur), viền trở về mặc định.

Ngăn chặn gửi form nếu dữ liệu không hợp lệ

Dùng `event.preventDefault()` để chặn gửi form

Nếu dữ liệu chưa hợp lệ, chúng ta có thể dùng event.preventDefault() để ngăn chặn hành động mặc định của form.

Ví dụ: Kiểm tra tên và email trước khi gửi.

<form id="registerForm">
    <input type="text" id="name" placeholder="Nhập tên">
    <input type="email" id="email" placeholder="Nhập email">
    <button type="submit">Đăng ký</button>
</form>

<script>
    document.getElementById("registerForm").onsubmit = function(event) {
        let name = document.getElementById("name").value;
        let email = document.getElementById("email").value;

        if (name.trim() === "" || email.trim() === "") {
            alert("Vui lòng nhập đầy đủ thông tin!");
            event.preventDefault(); // Ngăn gửi form nếu dữ liệu trống
        }
    };
</script>

Giải thích:

Nếu tên hoặc email bị trống, form sẽ không được gửi.
event.preventDefault() giúp kiểm tra dữ liệu trước khi gửi.

Kiểm tra dữ liệu trước khi gửi form bằng JavaScript

Ngoài việc ngăn chặn form, có thể hiển thị thông báo lỗi trực tiếp trên giao diện.

Ví dụ: Hiển thị lỗi nếu mật khẩu không hợp lệ.

<form id="loginForm">
    <input type="password" id="password" placeholder="Nhập mật khẩu">
    <span id="passwordError" style="color: red;"></span>
    <button type="submit">Đăng nhập</button>
</form>

<script>
    document.getElementById("loginForm").onsubmit = function(event) {
        let password = document.getElementById("password").value;
        let errorSpan = document.getElementById("passwordError");

        if (password.length < 6) {
            errorSpan.textContent = "Mật khẩu phải có ít nhất 6 ký tự!";
            event.preventDefault(); // Ngăn gửi form nếu mật khẩu sai
        } else {
            errorSpan.textContent = "";
        }
    };
</script>

Giải thích:

Nếu mật khẩu dưới 6 ký tự, hiển thị lỗi.
event.preventDefault() giúp ngăn chặn gửi form nếu dữ liệu không hợp lệ.

Gửi dữ liệu Form trong JavaScript

Khi người dùng điền thông tin vào Form và nhấn "Gửi", dữ liệu có thể được truyền đến server theo nhiều cách khác nhau. Trong phần này, chúng ta sẽ tìm hiểu cách gửi dữ liệu bằng phương thức GET và POST, cũng như cách gửi dữ liệu không tải lại trang bằng JavaScript.

Gửi dữ liệu bằng phương thức GET và POST

Gửi form bằng cách submit mặc định

Thông thường, khi người dùng nhấn nút "Gửi", trình duyệt sẽ gửi dữ liệu form đến server bằng phương thức GET hoặc POST, tuỳ thuộc vào thuộc tính method của form.

Ví dụ: Gửi dữ liệu bằng phương thức GET

<form action="process.php" method="GET">
    <input type="text" name="username" placeholder="Nhập tên">
    <input type="email" name="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

Giải thích:

Khi form được gửi, dữ liệu sẽ xuất hiện trên URL, ví dụ:

process.php?username=JohnDoe&[email protected]

GET thường được sử dụng khi không có dữ liệu nhạy cảm vì dữ liệu hiển thị trên URL.

Ví dụ: Gửi dữ liệu bằng phương thức POST

<form action="process.php" method="POST">
    <input type="text" name="username" placeholder="Nhập tên">
    <input type="email" name="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

Giải thích:

Khi gửi bằng POST, dữ liệu không hiển thị trên URL mà được gửi ngầm đến server.
POST thích hợp cho các dữ liệu nhạy cảm như mật khẩu, thông tin thanh toán.

Gửi dữ liệu bằng JavaScript (Fetch API, XMLHttpRequest)

Ngoài cách submit thông thường, ta có thể sử dụng JavaScript để gửi dữ liệu form một cách linh hoạt hơn.

Dùng Fetch API để gửi dữ liệu

Fetch API giúp gửi dữ liệu mà không cần tải lại trang.

Ví dụ: Gửi dữ liệu bằng Fetch API với phương thức POST

<form id="myForm">
    <input type="text" id="username" placeholder="Nhập tên">
    <input type="email" id="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault(); // Ngăn chặn tải lại trang

        let username = document.getElementById("username").value;
        let email = document.getElementById("email").value;

        fetch("process.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: `username=${encodeURIComponent(username)}&email=${encodeURIComponent(email)}`
        })
        .then(response => response.text())
        .then(data => {
            alert("Phản hồi từ server: " + data);
        })
        .catch(error => console.error("Lỗi:", error));
    });
</script>

Giải thích:

event.preventDefault(); giúp ngăn chặn form tải lại trang.
fetch("process.php", { method: "POST", ... }) gửi dữ liệu đến server.
Server xử lý và phản hồi dữ liệu, sau đó hiển thị bằng alert().

Dùng XMLHttpRequest để gửi dữ liệu

XMLHttpRequest (XHR) là một cách khác để gửi dữ liệu mà không tải lại trang.

Ví dụ: Gửi dữ liệu bằng XMLHttpRequest

<form id="myForm">
    <input type="text" id="username" placeholder="Nhập tên">
    <input type="email" id="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

<script>
    document.getElementById("myForm").onsubmit = function(event) {
        event.preventDefault();

        let xhr = new XMLHttpRequest();
        let username = document.getElementById("username").value;
        let email = document.getElementById("email").value;

        xhr.open("POST", "process.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert("Phản hồi từ server: " + xhr.responseText);
            }
        };

        xhr.send(`username=${encodeURIComponent(username)}&email=${encodeURIComponent(email)}`);
    };
</script>

Giải thích:

Sử dụng XMLHttpRequest để gửi dữ liệu không tải lại trang.
Server phản hồi, sau đó hiển thị kết quả qua alert().

Xử lý gửi dữ liệu không tải lại trang

Gửi dữ liệu mà không tải lại trang giúp tăng trải nghiệm người dùng. Ta có thể dùng Fetch API để gửi dữ liệu và hiển thị phản hồi ngay trên trang.

Gửi dữ liệu và hiển thị phản hồi từ server

Ví dụ: Hiển thị thông báo "Gửi thành công" khi server phản hồi.

<form id="contactForm">
    <input type="text" id="name" placeholder="Nhập tên">
    <input type="email" id="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>

<p id="responseMessage"></p>

<script>
    document.getElementById("contactForm").addEventListener("submit", function(event) {
        event.preventDefault();

        let name = document.getElementById("name").value;
        let email = document.getElementById("email").value;
        let responseMessage = document.getElementById("responseMessage");

        fetch("process.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: `name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`
        })
        .then(response => response.text())
        .then(data => {
            responseMessage.textContent = "Gửi thành công! Phản hồi từ server: " + data;
        })
        .catch(error => {
            responseMessage.textContent = "Có lỗi xảy ra!";
            console.error("Lỗi:", error);
        });
    });
</script>

Giải thích:

Khi form được gửi, dữ liệu sẽ gửi đi mà không tải lại trang.
Hiển thị phản hồi từ server ngay trên trang (responseMessage.textContent).

Ví dụ thực tế về xử lý Form trong JavaScript

Dưới đây là ba ví dụ thực tế về xử lý Form trong JavaScript, bao gồm:

Form đăng nhập – Kiểm tra tài khoản và mật khẩu trước khi gửi.
Form đăng ký – Xác thực email, số điện thoại, mật khẩu và hiển thị lỗi.
Form liên hệ (Contact Form) – Gửi dữ liệu đến server mà không tải lại trang bằng fetch().

Form đăng nhập

Yêu cầu:

Kiểm tra xem tài khoản và mật khẩu có được nhập hay không.
Nếu hợp lệ, gửi form; nếu không, hiển thị thông báo lỗi.

<form id="loginForm">
    <input type="text" id="username" placeholder="Tên đăng nhập">
    <input type="password" id="password" placeholder="Mật khẩu">
    <button type="submit">Đăng nhập</button>
    <p id="loginMessage"></p>
</form>

<script>
    document.getElementById("loginForm").addEventListener("submit", function(event) {
        event.preventDefault();

        let username = document.getElementById("username").value.trim();
        let password = document.getElementById("password").value.trim();
        let message = document.getElementById("loginMessage");

        if (username === "" || password === "") {
            message.textContent = "Vui lòng nhập đầy đủ tài khoản và mật khẩu!";
            message.style.color = "red";
        } else {
            message.textContent = "Đăng nhập thành công!";
            message.style.color = "green";
            // Thực hiện gửi dữ liệu đến server tại đây nếu cần
        }
    });
</script>

Giải thích:

Kiểm tra nếu ô nhập trống, hiển thị lỗi.
Nếu hợp lệ, hiển thị "Đăng nhập thành công!".

Form đăng ký

Yêu cầu:

Xác thực email, số điện thoại, mật khẩu.
Hiển thị lỗi nếu dữ liệu không hợp lệ.

<form id="registerForm">
    <input type="text" id="fullname" placeholder="Họ và tên">
    <input type="email" id="email" placeholder="Email">
    <input type="tel" id="phone" placeholder="Số điện thoại">
    <input type="password" id="passwordReg" placeholder="Mật khẩu">
    <button type="submit">Đăng ký</button>
    <p id="registerMessage"></p>
</form>

<script>
    document.getElementById("registerForm").addEventListener("submit", function(event) {
        event.preventDefault();

        let fullname = document.getElementById("fullname").value.trim();
        let email = document.getElementById("email").value.trim();
        let phone = document.getElementById("phone").value.trim();
        let password = document.getElementById("passwordReg").value.trim();
        let message = document.getElementById("registerMessage");

        let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        let phonePattern = /^[0-9]{10}$/;
        
        if (fullname === "" || email === "" || phone === "" || password === "") {
            message.textContent = "Vui lòng điền đầy đủ thông tin!";
            message.style.color = "red";
        } else if (!emailPattern.test(email)) {
            message.textContent = "Email không hợp lệ!";
            message.style.color = "red";
        } else if (!phonePattern.test(phone)) {
            message.textContent = "Số điện thoại phải có 10 chữ số!";
            message.style.color = "red";
        } else if (password.length < 6) {
            message.textContent = "Mật khẩu phải có ít nhất 6 ký tự!";
            message.style.color = "red";
        } else {
            message.textContent = "Đăng ký thành công!";
            message.style.color = "green";
            // Gửi dữ liệu đến server nếu cần
        }
    });
</script>

Giải thích:

Kiểm tra các trường nhập có bị bỏ trống không.
Kiểm tra định dạng email và số điện thoại bằng Regex.
Kiểm tra mật khẩu có ít nhất 6 ký tự.
Nếu hợp lệ, hiển thị "Đăng ký thành công!".

Form liên hệ (Contact Form)

Yêu cầu:

Gửi dữ liệu đến server mà không tải lại trang (fetch()).
Hiển thị thông báo khi gửi thành công hoặc lỗi.

<form id="contactForm">
    <input type="text" id="contactName" placeholder="Họ và tên">
    <input type="email" id="contactEmail" placeholder="Email">
    <textarea id="contactMessage" placeholder="Nội dung liên hệ"></textarea>
    <button type="submit">Gửi liên hệ</button>
    <p id="contactResponse"></p>
</form>

<script>
    document.getElementById("contactForm").addEventListener("submit", function(event) {
        event.preventDefault();

        let name = document.getElementById("contactName").value.trim();
        let email = document.getElementById("contactEmail").value.trim();
        let message = document.getElementById("contactMessage").value.trim();
        let responseMessage = document.getElementById("contactResponse");

        if (name === "" || email === "" || message === "") {
            responseMessage.textContent = "Vui lòng nhập đầy đủ thông tin!";
            responseMessage.style.color = "red";
            return;
        }

        fetch("process_contact.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: `name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}&message=${encodeURIComponent(message)}`
        })
        .then(response => response.text())
        .then(data => {
            responseMessage.textContent = "Gửi thành công! Phản hồi từ server: " + data;
            responseMessage.style.color = "green";
        })
        .catch(error => {
            responseMessage.textContent = "Có lỗi xảy ra, vui lòng thử lại!";
            responseMessage.style.color = "red";
            console.error("Lỗi:", error);
        });
    });
</script>

Giải thích:

Kiểm tra các trường nhập có bị bỏ trống không.
Sử dụng fetch() để gửi dữ liệu mà không tải lại trang.
Hiển thị thông báo phản hồi từ server.

Kết bài

Xử lý Form trong JavaScript là một phần quan trọng trong việc tạo ra các trang web tương tác, giúp thu thập và xử lý dữ liệu người dùng một cách hiệu quả. Bằng cách sử dụng các phương pháp như truy cập và lấy dữ liệu từ Form, kiểm tra dữ liệu nhập vào (validation), xử lý sự kiện trong Form và gửi dữ liệu mà không cần tải lại trang, chúng ta có thể tối ưu trải nghiệm người dùng và đảm bảo dữ liệu được nhập chính xác.

Việc hiểu rõ và áp dụng đúng các kỹ thuật xử lý Form sẽ giúp bạn xây dựng các trang web chuyên nghiệp hơn, bảo mật hơn và thân thiện hơn với người dùng. Hãy thực hành các ví dụ thực tế để nắm vững kiến thức và ứng dụng linh hoạt vào các dự án của bạn!