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>
Nhập số:
Lặp lại:
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>