Ứng dụng javascript kiểm tra dữ liệu trong form

Ứng dụng javascript kiểm tra dữ liệu trong form hướng dẫn cách kiểm tra các loại dữ liệu trong form như text , radio , checkbox, select, textarea…Thực hiện cụ thể em xem trong video ở cuối bài nhé

1. Code html tạo form

Chúng ta tạo 1 form để thực hiện kiểm tra bằng javascript nhé:

– Tạo file dangky.html và code:

<form id="frm1" method="post" action="xulydangky.php">
  <p>
    <label>Tên đăng nhập</label>
    <input type="text" class="txt" id="tendangnhap" name="tendangnhap" placeholder="Tên đăng nhập 6 đến 10 ký tự" autocomplete="off" autofocus>
  </p>
  <p>
    <label>Mật khẩu</label>
    <input type="password" class="txt" id="matkhau" name="matkhau" placeholder="Mật khẩu 6 đến 20 ký tự" autocomplete="new-password">
  </p>
  <p>
    <label>Họ tên</label>
    <input type="text" class="txt" id="hoten" name="hoten" placeholder="Nhập họ tên của bạn">
  </p>
  <p>
    <label>Email</label>
    <input type="email" class="txt" id="email" name="email" placeholder="Nhập email của bạn">
  </p>
  <p>
    <label>Phái</label>  
    <span id="chonphai">             
        <input type="radio" name="phai" value="Nam"><label>Nam</label>
        <input type="radio" name="phai" value="Nữ"><label>Nữ</label><br>
    </span>
  </p> 
  <p>
    <label>Sở thích</label>
    <span id="chonsothich">
      <input type="checkbox" class="sothich" name="st[]">Nhìn mưa rơi 
      <input type="checkbox" class="sothich" name="st[]">Nghe chim hót 
      <input type="checkbox" class="sothich" name="st[]">Ngắm mây bay
     </span>
  </p>
  <p>
    <label>Nghề nghiệp</label>    
    <select name="nghenghiep" id="nghenghiep" class="txt">
      <option value="0">Chọn nghề </option>
      <option value="1">Sinh viên</option>
      <option value="2">Giáo viên </option>
      <option value="3">Lập trình viên </option>
    </select>
  </p>
  <p>
    <label>Giới thiệu </label>
    <textarea class="txt" id="gioithieu" name="gioithieu" rows="6" placeholder="Giới thiệu bản thân"></textarea>
  </p>   
  </p>
  <p>
    <label></label>
    <button type="submit" name="btndangky" value="nut">Đăng ký</button>
  </p>
</form>

– Định dạng css cho form

  #frm1  { 
    width: 600px; margin: auto; 
    border: 2px solid darkslategrey; padding: 10px;
  }
  #frm1 > p { 
    display: grid;
    grid-template-columns: 120px auto;
  }
  #frm1 label { color: darkslategray;}
  #frm1 .txt { 
      width: 100%; padding: 8px; border: 1px solid lightcoral; 
      vertical-align:middle;}
  #frm1  button { width: 120px; height: 40px; }
  #frm1 textarea.txt {vertical-align: top; }

2. Chuẩn bị chỗ hiện lỗi

Lỗi ở đây là lỗi dữ liệu, tức user nhập dữ liệu trong form khộng đúng như yêu cầu thì chúng ta hiện lỗi để user nhập lại.

– Code html: Trước tag p chứa button, thêm code

<p> <label></label> <span id="baoloi"></span> </p>

– Định dạng css cho vị trí hiện lỗi:

#frm1 #baoloi { 
  background: darksalmon; color:ghostwhite;
  text-align: center; 
}

3. Tạo class định dạng cho các input mà user nhập sai:

Chúng ta tạo 1 class css để khi user nhập sai chỗ nào trong form thì cho chỗ đó sáng lên. Đơn giản thôi, bạn vào css tạo class như sau:

#frm1 .loi { padding: 6px; border:1px solid red;  background:yellow; }

4. Gọi hàm kiểm tra khi submit

Hàm kiểm tra giá trị trong form được gọi trong sự kiện submit của form. Hàm này bạn viết gì thì tùy ý nhưng nhớ trả về giá trị true hoặc falase nhé. Trong sự kiện submit của form , bạn ghi như sau:

<form id="frm1" method="post" onsubmit="return kiemtra()" >

5. Định nghĩa hàm kiểm tra

Trong hàm kiểm tra các loại dữ liệu trong form , bạn tạo 1 biến loi và gán giá trị rỗng. Quá trình kiểm tra sau đó nếu thấy có lỗi dữ liệu thì sẽ gán giá trị cho biến loi.

function kiemtra() {
    var loi = "";
    // kiểm tra tên đăng nhập : text + length 

    // kiểm tra mật khẩu : text + length 

    // kiểm tra họ tên : text

    //kiểm tra email

    //kiểm tra  phái : radio
 
    //kiểm tra sở thích : checkbox

    // kiểm tra nghề nghiệp : select
    
    // kiểm tra giới thiệu : textarea

    // trả về giá trị kiểm tra
    if(loi!=""){
        document.getElementById('baoloi').innerHTML="<p>" + loi + "</p>";
        return false;
    }
}

6. Kiểm tra dữ liệu text với field tên đăng nhập

var tdn = document.getElementById("tendangnhap");
if(tdn.value==""){
    tdn.className="loi";        
    loi += "Tên đăng nhập không được bỏ trống<br>";
}
else if(tdn.value.length<=6){
    tdn.className="loi";       
    loi += "Tên đăng nhập quá ngắn<br>";        
}
else if(tdn.value.length>10){
    tdn.className="loi";       
    loi += "Tên đăng nhập quá dài<br>";        
}
else tdn.className="txt";  

7. Kiểm tra dữ liệu text với field mật khẩu

var mk = document.getElementById("matkhau");
if(mk.value==""){
    mk.className="loi";        
    loi += "Mật khẩu không được bỏ trống<br>";
}
else if(mk.value.length<=6){
    mk.className="loi";       
    loi += "Mật khẩu quá ngắn<br>";        
}
else if(mk.value.length>20){
    mk.className="loi";       
    loi += "Mật khẩu quá dài<br>";        
}
else mk.className="txt";  

8. Kiểm tra dữ liệu text với field họ tên

var hoten= document.getElementById("hoten");        
if(hoten.value==""){ 
    hoten.className="loi"; 
    loi += "Họ và tên không được bỏ trống.<br>"; 
}
else hoten.className="txt"; 

9. Kiểm tra dữ liệu text với với field email

var email= document.getElementById("email");    
if(email.value==""){   
    email.className="loi";
    loi += "Email không được bỏ trống.<br>";
}

10. Kiểm tra trạng thái các radio với field phái

dem=0;
var arr_phai= document.getElementsByName("phai");
for(var i=0; i<arr_phai.length; i++){
    if(arr_phai[i].checked) dem++;
}
if(dem==0){
    document.getElementById("chonphai").className="loi";
    loi +=  "Phải chọn giới tính.<br>";
}
else document.getElementById("chonphai").className="";

11. Kiểm tra trạng thái các checkbox với field sở thích

arr_sothich= document.getElementsByClassName("sothich");  
dem=0;
for(var i=0;i<arr_sothich.length;i++){
    if(arr_sothich[i].checked) dem++;        
}
if(dem==0){
    document.getElementById("chonsothich").className="loi";
    loi += "Phải chọn ít nhất 1 sở thích.<br>";
}
else document.getElementById("chonsothich").className=""; 

12. Kiểm tra giá trị selectbox với field nghề nghiệp

var nghe = document.getElementById("nghenghiep");
if (nghe.value==0){
    nghe.className="loi";
    loi += "Phải chọn một nghề.<br>";
}
else nghe.className="txt";

13. Kiểm tra độ dài textare với field giới thiệu

var gt= document.getElementById('gioithieu');    
if(gt.value.length>200){
    gt.className="loi";
    loi += "Giới thiệu phải dưới 200 kí tự.<br>";
}
else gt.className="txt";