Mách bạn cách bắt lỗi form đăng ký bằng Javascipt từ A-Z

Khi tương tác với cơ sở dữ liệu thực hiện các tác vụ: đăng nhập, đăng ký, liên hệ, post bài,…thì người dùng cần sử dụng form. Tuy nhiên, một vấn đề được nhiều người quan tâm là kiểm tra, bắt lỗi dữ liệu từ form như thế nào?

Bắt lỗi form đăng ký bằng Javascipt

Có rất nhiều cách khác nhau được mọi người áp dụng để kiểm tra dữ liệu, bắt lỗi form. Tuy nhiên sử dụng Javascript được xem là hiệu quả và tiện lợi nhất. Bạn có thể kiểm tra người dùng đã nhập dữ liệu từ form hay chưa. Nếu như nhập rồi thì tiếp tục xử lý còn nếu như chưa nhập thì cần xuất ra thông báo yêu cầu người dùng nhập những thông tin bắt buộc vào.

Bạn có thể xem thêm tài liệu về ngôn ngữ lập trình JavaScript: http://eclipsercp.org/code-javascript/

Một form thêm thành viên giả sử như sau:

Một mẫu form đăng ký bằng javascript
Một mẫu form đăng ký bằng javascript

Khi người dùng bị bắt buộc phải nhập các thông tin là Username, Password nếu như người dùng không nhập thì một box sẽ được xuất ra. Box có chức năng thông báo yêu cầu nhập vào rồi mới được AddNew.

Sự kiện Onsubmit trong form sẽ giúp làm được điều đỏ, giúp return về hà check submit addnew(). Để kiểm tra dữ liệu đã được nhập hay chưa thì hàm này được viết bằng Javascript.

Mã:

<form name=”adduser” action=”themthanhvien.php” method=”post” onsubmit=”return check_submit_addnew()”>

<fieldset>

<legend>Member Register</legend>

<label>User Name:</label> <input type=”text” name=”user” size=”25″ /><br />

<label>Password:</label> <input type=”password” name=”pass” size=”25″ /><br />

<label>Re-Password:</label> <input type=”text” name=”re_pass” size=”25″ /><br />

<label>E-Mail:</label> <input type=”text” name=”email” size=”25″ /><br />

<label>Address :</label> <input type=”text” name=”address” size=”25″ /><br />

<label></label> <input type=”submit” name=”ok” value=”Add New” /> </fieldset>

</form>

Dưới đây là code javaScript để kiểm tra dữ liệu từ form.

Mã:

<script language=”javascript” type=”text/javascript”>

document.forms[‘adduser’].name.focus();

function set_focus()

{

document.forms[‘adduser’].name.focus();

}

function check_submit_addnew()

{

var frm = window.document.adduser;

if(frm.user.value==”)

{

alert(‘Xin vui lòng nhập Username !’);

document.forms[‘adduser’].user.focus();

return false;

}

else if(frm.pass.value==”)

{

alert(‘Xin vui lòng nhập Password !’);

document.forms[‘adduser’].pass.focus();

return false;

}

else

return true;

}

</script>

Cuối cùng chúng ta sẽ có kết quả dưới đây:

Mẫu đăng kí form bằng javascrip thiết bị lỗi.
Mẫu đăng kí form bằng javascrip thiết bị lỗi.

Bạn hãy tham khảo thêm về cách sử dụng validate form bằng JavaScript

Như vậy là chúng ta đã có một đoạn javaScript dùng để kiểm tra dữ liệu nhập từ form đơn giản nhưng cũng rất hiệu quả. Trên đây mình chỉ kiểm tra dữ liệu của User và Pass đã được nhập hay chưa mà thôi, nếu các bạn muốn kiểm tra dữ liệu nào nữa thì cứ thêm else if() vào nhé. Khi thực hiện dự án cho khách hàng thì cách này mình hay sử dụng nhất vì khi thực hiện ta có thể chủ động tất cả, từ cấu hình đến thông báo lỗi. Cũng với ví dụ với đoạn mã ở trên nhé (đương nhiên là không có required):

1<input id=”username” ” type=”text” name=”username” />

Ta sẽ sử dụng một đoạn mã JavaScript để kiểm tra điều kiện như sau:

1if ($(“#username”).val() == “”){}

Trong đó $(“#username”).val() sẽ là giá trị nhập vào của khách và câu lệnh trên đại ý là nếu khách không nhập giá trị gì vào trường có ID là username thì… Thì như thế nào thì bạn đặt lệnh trong dấu {}

Có một số lựa chọn như popup báo lỗi thì bạn sử dụng alert(), nếu muốn đánh dấu khung lỗi thì có thể dùng .css(),… Và đặc biệt là cần phải có lệnh ngăn hành động .preventDefault().

Cụ thể lệnh sẽ như thế này:

1

2

3

4

5

6

7

8

9

$(document).ready(function() {

$(“#formname”).submit(function (e) {

if ($(“#username”).val() == “” ) {

$(“#username”).css(‘box-shadow’, ‘0px 0px 7px red’);

alert(‘Ban chua nhap thong tin tai o Username.’);

e.preventDefault();

}

});

});

Bạn có thể tham khảo thêm cách tạo form đăng ký bằng JavaScript

Đoạn mã trên có ý nghĩa là khi bấm nút submit của form có ID là formname thì nếu ở ô có ID là username mà người dùng không điền thông tin thì form này không được submit thành công mà sẽ có popup thông báo lỗi là: Bạn chưa nhập thông tin tại ô Username. và kèm theo đó là ô này sẽ được đánh dấu đỏ.

Nhập liệu thư viện javascript.
Nhập liệu thư viện javascript.

Chú ý là bạn phải chèn thư viện jQuery và trước để có thể sử dụng lệnh JavaScript này nhé.

 Hy vọng, với bài viết này bạn sẽ biết cách bắt lỗi form đăng ký bằng Javascipt đơn giản hơn. 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 *