Hướng dẫn Sử dụng JavaScript để kiểm tra dữ liệu form

[PVS]

Sử dụng JavaScript để kiểm tra dữ liệu form

Form giúp chúng ta tương tác đượ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…Tuy nhiên để kiếm tra dữ liệu từ form có tồn tại hay không là vấn đề mình muốn nói ở bài viết này.

Có rất nhiều cách để kiểm tra dữ liệu nhập từ form mà có lẽ các bạn từng áp dụng. Nhưng ở bài viết này mình sẽ hướng dẫn các bạn dùng javaScript để kiểm xem người dùng đã nhập dữ liệu từ form hay chưa. Nếu người dùng nhập rồi thì chúng ta tiếp tục xử lý, còn chưa nhập thì chúng ta xuất ra thông báo yêu cầu người dùng nhập vào những thông tin bắt buộc.

Chúng ta có một form thêm thành viên như sau:

​

Ở đây thí dụ mình muốn và bắt buộc người dùng phải nhập các thông tin là Username, Password nếu như người dùng không nhập thì chúng ta sẽ xuất ra một box thông báo yêu cầu nhập vào rồi mới được Add New.

Để làm được điều đó mình sẽ dùng sự kiện onsubmit trong form để return về hàm check_submit_addnew(). Hàm này được viết bằng javaScript dùng để kiểm tra xem dữ liệu đã được nhập hay chưa.

<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.

<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:

​

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é.

Chúc các bạn thành công.

Nguồn: tuhocphp.com​