Sự kiện form

9.1 Các sự kiện cơ bản của form

Để làm cho form hoạt động, cần hiểu và quản lý các sự kiện xảy ra khi người dùng tương tác với các thành phần của form. Dưới đây là phần giải thích chi tiết về các sự kiện cơ bản của form trong HTML, xử lý chúng bằng JavaScript và ví dụ sử dụng.

Trong HTML, form có thể tạo ra nhiều sự kiện khác nhau diễn ra khi người dùng tương tác với các thành phần của form như ô nhập liệu, nút bấm, checkbox và radio button. Các sự kiện chính của form bao gồm:

• submit — sự kiện gửi form
• reset — sự kiện đặt lại form
• focus — sự kiện khi một thành phần nhận được focus
• blur — sự kiện khi một thành phần bị mất focus
• change — sự kiện thay đổi giá trị của một thành phần trong form
• input — sự kiện khi nhập dữ liệu vào một thành phần của form
• select — sự kiện khi chọn văn bản trong một thành phần của form

9.2 Sự kiện submit

Sự kiện submit xảy ra khi form được gửi đi. Điều này thường xảy ra khi người dùng nhấn nút "Submit" trong form. Xử lý sự kiện này cho phép thực hiện kiểm tra dữ liệu trước khi gửi chúng lên server, ngăn chặn việc gửi form khi có lỗi nhập liệu và thực hiện các hành động khác.

Ví dụ xử lý sự kiện submit:

    
        <form id="my-form" action="/submit" method="post">
          <label for="username">Tên người dùng:</label>
          <input type="text" id="username" name="username">
          <button type="submit">Gửi</button>
        </form>
    
  

    
      const form = document.getElementById('my-form');

      form.addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        if (username === '') {
          alert('Vui lòng nhập tên người dùng.');
          event.preventDefault(); // ngăn không cho gửi form
        } else {
          alert(`Tên người dùng đã nhận được: ${username}`);
          event.preventDefault();
        }
      });
    
  

    
      const form = document.getElementById('my-form');

      form.addEventListener('submit', function(event) {
        const username = document.getElementById('username').value;
        if (username === '') {
          alert('Vui lòng nhập tên người dùng.');
          event.preventDefault(); // ngăn không cho gửi form
        }
      });
    
  

9.3 Sự kiện reset

Sự kiện reset xảy ra khi form được đặt lại về trạng thái ban đầu. Thường thì sự kiện này xảy ra khi người dùng nhấn nút "Reset". Xử lý sự kiện này có thể hữu ích để thực hiện các hành động bổ sung khi đặt lại form, chẳng hạn như xóa thông báo lỗi.

Ví dụ xử lý sự kiện reset:

    
      ...
      <button id="btn" type="button">Đặt lại</button>
      ...
    
  

    
      ...
      <button type="reset">Đặt lại</button>
      ...
    
  

    
      const form = document.getElementById('my-form');
      const btn = document.getElementById('btn');
      ...
      const log = document.getElementById('log');

      ...
      btn.addEventListener('click', () => {
        ...
        log.textContent = 'Form đã được đặt lại!';
      });
    
  

    
      const form = document.getElementById('my-form');
      const log = document.getElementById('log');

      form.addEventListener('reset', function () {
        log.textContent = 'Form đã được đặt lại!';
      });
    
  

9.4 Sự kiện focus và blur

Sự kiện focus và blur xảy ra khi một thành phần của form nhận và mất focus tương ứng. Các sự kiện này thường được sử dụng để cải thiện trải nghiệm người dùng với form, chẳng hạn như hiển thị gợi ý hoặc thông báo lỗi.

Ví dụ xử lý sự kiện focus:

    
      ...
      <div id="username-hint" style="display: none;">
        Bạn sẽ thấy gợi ý này khi focus vào ô.
        Nó sẽ hiển thị ngay cả khi bạn thay đổi focus.
      </div>
      ...
    
  

    
      ...
      <div id="username-hint" style="display: none;">
        Bạn sẽ thấy gợi ý này khi focus vào ô.
        Nó sẽ hiển thị ngay cả khi bạn thay đổi focus.
      </div>
      ...
    
  

    
      ...
      usernameInput.addEventListener('focus', function (event) {
        hint.style.display = 'block';
      });
    
  

    
      ...
      usernameInput.addEventListener('focus', function () {
        hint.style.display = 'block';
      });
    
  

Ví dụ xử lý sự kiện blur:

    
      ...
      <div id="username-error" style="display: none; color: red;">
        Lỗi sẽ xuất hiện chỉ khi ô bị để trống sau khi mất focus
      </div>
      ...
    
  

    
      ...
      <div id="username-error" style="display: none; color: red;">
        Lỗi sẽ xuất hiện chỉ khi ô bị để trống sau khi mất focus
      </div>
      ...
    
  

    
      ...
      usernameInput.addEventListener('blur', function (event) {
        error.style.display = usernameInput.value === '' ? 'block' : 'none';
      });
    
  

    
      ...
      usernameInput.addEventListener('blur', function () {
        error.style.display = usernameInput.value === '' ? 'block' : 'none';
      });