Form Validation Kiểm Tra Dữ Liệu Dom - JavaScript
Có thể bạn quan tâm
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> ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mớiTừ khóa » Form Liên Hệ Bằng Javascript
-
32 Contact Form HTML Cho Thiết Kế Website - Niềm Vui Lập Trình
-
Hướng Dẫn Tạo Form Liên Hệ Bằng HTML, CSS - Quách Quỳnh
-
Tạo Form đăng Ký Bằng Javascript - Quách Quỳnh
-
Hướng Dẫn Tạo Contact Form đơn Giản Với CSS - Freetuts
-
Cách Tạo Form đăng Ký Bằng Javascript - Đại Bàng
-
Xây Dựng Một Form Liên Hệ Bootstrap Sử Dụng PHP Và AJAX
-
Tạo Form Liên Hệ Với Contactable - NTuts
-
Gửi Email Bằng HTML Và - Complete JavaScript
-
Bắt Lỗi Form đăng Ký Bằng Javascript - Songmaweb
-
DOM Tutorial - Làm Chức Năng Kiểm Tra Thông Tin Của Form
-
Tạo Form Liên Hệ Có đính Kèm File Sử Dụng Php Và Ajax
-
Tạo Form Liên Hệ Wordpress đơn Giản Với Contact Form 7
-
How To Create A Contact Form With CSS - W3Schools
-
Kiểm Tra Dữ Liệu Trong Form Với Javascript - Thầy Long Web