jQuery: Validate form đơn giản nhất với jQuery

Validate thường với jQuery

jQuery 2017

$(document).ready(function() {
 $("#save").on('click', function() {
 
        // BƯỚC 1: Lấy dữ liệu từ form
             var soHoaDon = $('#soHoaDon').val();
             var ngayHoaDon = $('#ngayHoaDon').val();
             var chietKhau = $('#chietKhau').val();
             var thueGTGT = $('#thueGTGT').val();
             var thanhTien = $('#thanhTien').val();
 
        // BƯỚC 2: Validate dữ liệu
        var flag = true;
 
        if (soHoaDon.length <= 0){
            $('#message').text('');
            $('#error').text('Số hóa đơn không được để trống!');
            flag = false;
            return flag;
        }
        else{
            $('#error').text('');
        }
 
        if (ngayHoaDon.length <= 0){
            $('#message').text('');
            $('#error').text('Ngày hóa đơn không được để trống!');
            flag = false;
            return flag;
        }
        else{
            $('#error').text('');
        }
 
        if (chietKhau.length <= 0){
            $('#message').text('');
            $('#error').text('Chiết khấu không được để trống!');
            flag = false;
            return flag;
        }
        else{
            $('#error').text('');
        }
 
        if (thueGTGT.length <= 0){
            $('#message').text('');
            $('#error').text('Thuế GTGT không được để trống');
            flag = false;
            return flag;
        }
        else{
            $('#error').text('');
        }
 
        if (thanhTien.length <= 0){
         $('#message').text('');
         $('#error').text('Thành tiền không được để trống');
         flag = false;
          return flag;
        }
        else{
         $('#error').text('');
        }

        //Nếu flag là true thì cho phép là gì đó trong biếu thức logic này
        if(flag){
         addHoaDon();//Gọi hàm thực thi nếu falg true
        }
        
    });
});

html

jQuery 2017

//CSS định dạng màu cho id hiển thị
#message{
 text-align: center;
 color: blue;
}
#error{
 text-align: center;
 color: red;
}
//Nội dung hiển thị lên đây
<p id="message"></p><p id="error"></p>

//Form nhập
<form action="" method="" >
    <input type="text" id="soHoaDon" placeholder="Nhập số hóa đơn"/>
    ....
    <input type="button" id="save" value="luu">
</form>