Hướng dẫn xử lý form hợp lệ với JavaScipt đơn giản cho người mới

Việc xử lý form, tức là chuẩn hóa dữ liệu nhập vào không đơn giản như làm form bằng HTML. Hiện nay, người dùng vẫn phải nhờ cậy khá nhiều vào Javascript để áp dụng xử lý.

Xử lý form trong Javascript là gì?

Một chức năng quan trọng của mọi trang web hiện nay đó chính là form. Khi bạn muốn sử dụng dữ liệu thì cần được lập trình. Chương trình trước khi sử dụng cần được kiểm tra xem có giá trị hay không.

Xử lý form bằng javascript
Xử lý form bằng javascript

Mời bạn xem thêm cách kiểm tra form hợp lệ với JavaScript

Một hạn chế là nếu máy chủ đang bận và phải mất một thời gian trước khi cảnh báo người dùng bằng hình thức không thể chấp nhận do lỗi. Người dùng khi này có thể nhận được thông báo với cảm giác không thoải mái và cũng có thể sẽ không quay lại trang web của bạn nữa. Nhờ có Javascript thì điều này sẽ không xảy ra.

Do client-side Javascript có thể làm nhiều việc để làm cho ít tốn thời gian nên việc người dùng nhập vào kiểm tra được thực hiện trên máy là rất quan trọng. Do có thể thực hiện ngay lập tức nên Javascript chạy trong trình duyệt của người dùng. Khi sử dụng Javascript thì chỉ cần cảnh báo với người dùng là họ đã để trống một mẫu nào nó chứ không cần phải gửi form đến cho server trước khi cảnh báo người dùng.

Validate form bằng javascript
Validate form bằng javascript

Mời bạn xem thêm cách bắt lỗi form đăng ký bằng JavaScript

Những việc cần làm khi xử lý form hợp lệ

Xác nhận các trường trống (empty)

Bạn chỉ cần kiểm tra người dùng không submit một giá trị rỗng bằng cách sử dụng if(inputboxValue==””){aler user…).

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!DOCTYPE html>

<html>

<head>

<title>Lesson 16: Form validation</title>

</head>

<body>

<h1>Lesson 16: Form validation</h1>

<form id=”myForm” action=”#” method=”post”>

<fieldset>

<p><label for=”txtName”>First Name:</label>

<input type=”text” id=”txtName” name=”txtName” />

</p>

<p><input type=”submit” value=”Submit” onclick=”validate()” /></p>

</fieldset>

</form>

<script type=”text/javascript”>

</script>

</body>

</html>

Giữa thẻ <script> viết hàm function validate() như sau:

function validate()

{

var userName = document.getElementById(“txtName”).value;

//if the length of the string value is 0,

//it means the user has entered no value:

if (userName.length == 0)

{

alert(“Please, enter your name”);

return false;

}

else

{

alert(“Thank you, ” + userName);

}

}

Tạo thẻ mở form

<form name=”myForm” action=”#” onsubmit=”return validateForm()” method=”post”>

Khi gửi dữ liệu lên máy chủ server thì chạy 2 action=”#” và method=”post”.

Việc người dùng cần để ý đến tên của Form ở thuộc tính name=”myForm” và nơi xử lý dữ liệu qua onsubmit=”return validateForm()”

ValidateForm() chính là tên hàm mà trong đó ta xây dựng code Javascript để bắt lỗi. Ta để onsubmit có nghĩa là, khi người dùng nhấn nút submit thì dữ liệu được chuyển đến hàm validateForm()

Thẻ input là một loại thẻ mẫu có dạng <input name=”ten”type=”text”/>.

Thẻ input
Thẻ input

Điều quan trọng trong thẻ input chính là name của nó. Chính thông qua name của Form và của Input mà Javascript lấy được dữ liệu nhập vào.

Lấy dữ liệu từ input

Đoạn code mẫu để lấy dữ liệu từ thẻ input:

var ten = document.forms[“myForm”][“ten”].value;

Như đoạn code trên có nghĩa là bạn lấy giá trị của thẻ input có tên là “ten” trong Form có tên là “myForm” và gán giá trị lấy được này vào biến var ten

Tương tự cho email: var email=document.forms[“myForm”][“email”].value;

Không được bỏ trống dữ liệu

var ten = document.forms[“myForm”][“ten”].value;

if (ten == “”) {

alert(“Tên không được để trống”);

return false;

}

Theo đó, sau khi lấy được dữ liệu từ thẻ input và gán vào biến ten, chương trình dùng hàm if để kiểm tra ten có rỗng hay không – if(ten==””). Nếu thỏa mãn điều kiện rỗng sẽ có hộp thông báo “Tên không được để trống” và ta dùng hàm alert để điều khiển tác vụ này, cuối cùng return false.

Kiểm tra dữ liệu nhập vào có phải là số không

var dienThoai = document.forms[“myForm”][“dienThoai”].value;

var kiemTraDT = isNaN(dienThoai);

if (kiemTraDT == true) {

alert(“Điện thoại phải để ở định dạng số”);

return false;

}

Hàm dùng để kiểm tra số đó là isNaN – viết tắt của is Not a Number. Nếu isNaN trả về giá trị TRUE nghĩa là đó không phải là một số.

Kiểm tra Email hợp chuẩn.

Hy vọng, với bài hướng dẫn xử lý form hợp lệ với JavaScipt ở trên sẽ giúp ích cho bạn trong việc học lập trình.

Chúc bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *