Hướng dẫn dùng validate JavaScript

Chắc có lẽ không ít lần bạn gặp một website mà ở đó người dùng nhập các thông tin vào một biểu mẫu (form) trước khi gửi tới máy chủ. Chẳng hạn như việc các bạn đăng ký/đăng nhập tài khoản trên Codelearn. Các thông tin mà người dùng nhập vào biểu mẫu cần phải được xác thực (validate) để đảm bảo sự hợp lý của dữ liệu.

Form Validation là gì?

Form Validation thường được sử dụng tại máy chủ, sau khi máy khách đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Gửi. Nếu dữ liệu được nhập bởi máy khách không chính xác hoặc không đầy đủ, máy chủ sẽ phải gửi lại tất cả dữ liệu cho máy khách và yêu cầu gửi lại biểu mẫu với thông tin chính xác. Đây thực sự là một quá trình kéo dài từng gây ra rất nhiều gánh nặng cho máy chủ.

Javascript cung cấp một cách để validate form trên máy khách trước khi gửi nó đến máy chủ. Form Validation thường thực hiện hai chức năng:

  • Basic Validation: Trước hết, biểu mẫu phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc đã được điền vào. Nó sẽ chỉ yêu cầu một vòng lặp qua từng trường trong biểu mẫu và kiểm tra dữ liệu.
  • Data Format Validation: Thứ hai, dữ liệu được nhập vào phải được kiểm tra về hình thức và giá trị chính xác. Mã của bạn phải bao gồm logic thích hợp để kiểm tra tính đúng đắn của dữ liệu.

Các cách Validate Form

Về cơ bản, có 3 cách để Validate Form:

  • Dữ liệu của form sẽ được gửi tới server (máy chủ), và việc xác thực (validate) sẽ được thực hiện tại phía máy chủ.
  • Dữ liệu của form sẽ được xác thực tại phía client bằng cách sử dụng Javascript, điều này giúp server không phải làm việc quá nhiều, và tăng hiệu năng cho ứng dụng.
  • Sử dụng cả 2 phương thức trên để xác thực form.

Trong bài viết này, mình sẽ trình bày về việc sử dụng Javascript để Validate Form. Để xây dựng được chức năng này thì đòi hỏi bạn phải có kiến thức Javascript căn bản, vì vậy nếu bạn chưa biết về Javascript thì hãy học nó đi nhé.

Ví dụ cụ thể

Mình sẽ lấy một ví dụ để hiểu quá trình xác nhận. Đây là một biểu mẫu đơn giản ở định dạng html:




    
    
    
    
    Document


    

Validate Form with JS

Name
EMail
Zip Code
Country

Output:

Hướng dẫn dùng validate JavaScript

Basic Form Validation

Trước tiên, chúng ta hãy xem cách thực hiện xác thực biểu mẫu cơ bản. Trong biểu mẫu trên, mình đang gọi validate() để xác thực dữ liệu khi xảy ra sự kiện gửi trực tiếp. Đoạn mã sau đây cho thấy việc triển khai hàm validate() này.

// Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }

Data Format Validation

Bây giờ chúng ta sẽ xem cách chúng ta có thể xác thực dữ liệu biểu mẫu đã nhập của mình trước khi gửi nó đến máy chủ web.

Ví dụ sau đây cho thấy cách xác thực địa chỉ email đã nhập. Địa chỉ email phải chứa ít nhất dấu ‘@’ và dấu chấm (.). Ngoài ra, ‘@’ không được là ký tự đầu tiên của địa chỉ email và dấu chấm cuối cùng ít nhất phải là một ký tự sau dấu ‘@’.

function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );

Validate tự động

Trình duyệt có thể tự động thực hiện xác thực HTML Form. Hãy xem ví dụ sau đây:

Nếu trường biểu mẫu (fname) trống, thuộc tính required sẽ ngăn không gửi biểu mẫu này:

Hướng dẫn dùng validate JavaScript

Chú ý: Các trình duyệt quá cũ, chẳng hạn IE phiên bản 9 hoặc cũ hơn không hỗ trợ validate tự động.

HTML5 đã giới thiệu một khái niệm xác thực HTML mới được gọi là xác thực ràng buộc(constraint validation).

Xác thực ràng buộc HTML dựa trên:

  • Ràng buộc xác thực HTML Input Attributes
  • Ràng buộc xác thực CSS Pseudo Selectors
  • Ràng buộc xác thực DOM Properties and Methods

1. Ràng buộc xác thực HTML Input Attributes

Một vài loại phần tử  mới được giới thiệu trong HTML5 có các thuộc tính (attribute) đặc biệt giúp trình duyệt biết cách để validate dữ liệu của nó một cách tự động. Dưới đây là danh sách một vài thuộc tính như vậy:

  • disabled: Chỉ định ràng phần tử Input này sẽ bị vô hiệu hóa (disabled).
  • max: Chỉ định giá trị lớn nhất của một phần tử Input
  • min: Chỉ định giá trị nhỏ nhất của một phần tử Input
  • pattern: Chỉ định mẫu giá trị của một phần tử Input
  • required: Chỉ định rằng trường đầu vào là bắt buộc. Người dùng phải nhập dữ liệu.
  • type: Chỉ định loại của một phần tử Input

Các bạn có thể xem danh sách đầy đủ ở đây.

2. Ràng buộc xác thực CSS Pseudo Selectors

  • :disabled: Chọn các phần tử đầu vào có thuộc tính "disabled" được chỉ định
  • :invalid: Chọn các phần tử đầu vào có giá trị không hợp lệ
  • :optional: Chọn các phần tử đầu vào không có thuộc tính "required" được chỉ định
  • :required: Chọn các phần tử đầu vào với thuộc tính "required" được chỉ định
  • :valid: Chọn các phần tử đầu vào có giá trị hợp lệ

Các bạn có thể xem danh sách đầy đủ ở đây.

Tạm kết 

Như vậy trong bài viết này, chúng ta đã cùng tìm hiểu về cách Validate Form cơ bản với Javascript. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo!

Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!