Form Validation kiểm tra dữ liệu Dom - JavaScript

Trong HTML5 có một số thuộc tính đã cho phép validation bằng cách thiết lập ngay từ thuộc tính của phần tử, như thuộc tính required, min, max ... ... hoặc input với thuộc tính type là url, email ... (xem form HTML5)

Tuy nhiên để validate (kiểm tra dữ liệu hợp lệ trước khi submit form) bạn cần dùng đến JavaScript, chặn lại việc submit để kiểm tra hợp lệ của dữ liệu trước thì bắt sự kiện onsubmit của form.

Ví dụ sau mỗi khi form submit nó sẽ gọi hàm validate(), nếu hàm trả về true thì form sẽ thực hiện submit, còn nếu trả về false sẽ không submit

<form onsubmit="return validate()" method="post">
      Nhập số: <input type="text" name="num1" id="num1" />
      <br />
      Lặp lại: <input type="text" name="num2" id="num2" />
      <br />
      <input type="submit" value="Submit" />
</form>

Giờ bạn chỉ việc xây dựng hàm JavaScript validate() để kiểm tra dữ liệu form, nếu phù hợp trả về true để submit

Ở đây ta kiểm tra 2 ô dữ liệu phải được nhập vào, và giá trị phải khác nhau

<script>
    function validate() {
      var n1 = document.getElementById("num1");
      var n2 = document.getElementById("num2");
      if(n1.value != "" && n2.value != "") {
        if(n1.value == n2.value) {
          return true;
        }
      }
      alert("Dư liệu không được để trống, không được giống nhau");
      return false;
    }
</script>