Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 9-Bài 18. Kiểm tra ràng buộc dữ liệu (Validation) phía Client

Tác giả: Dương Nguyễn Phú Cường
Số phút học: 146 phút

Ngày đăng: 4/11/2025, 22:44

Lượt xem: 761

Ràng buộc dữ liệu phía Người dùng (Client), thường sử dụng Javascript để bắt/cảnh báo các trường hợp dữ liệu sai so với các quy luật (rules) mà mình định nghĩa trước. Một số quy luật (rule) ràng buộc dữ liệu thường sử dụng như:

required: bắt buộc nhập
minlength: độ dài chuỗi nhập ít nhất phải từ minlength ký tự trở lên
maxlength: độ dài chuỗi nhập tối đa chỉ được đến maxlength ký tự
... Các quy luật có thể xem thêm tại: https://jqueryvalidation.org/documentation/

Chúng ta sẽ sử dụng thư viện Jquery validation để tạo các ràng buộc cho nhanh nhé.

Step 1: tích hợp thư viện `Jquey validation` vào dự án

Download thư viện tại: https://jqueryvalidation.org/
Giải nén file. Đổi tên thư mục dist -> jquery-validation để tiện quản lý thư viện
Copy thư mục jquery-validation vào thư mục dự án /public/vendor/jquery-validation

Step 2: liên kết thư viện `jquery validation` vào layout backend

Hiệu chỉnh view `resources\views\backend\layout\master.blade.php`:

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/popperjs/popper.min.js') }}"></script>
    <script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>

    <!-- Thư viện Jquery validation -->
    <script src="{{ asset('vendor/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-validation/localization/messages_vi.min.js') }}"></script>

    <!-- Các custom script dành riêng cho từng view -->
    @yield('custom-scripts')
  </body>
</html>

Step 3: thêm kiểm tra ràng buộc dữ liệu (validation) cho chức năng `Thêm mới chủ đề`:

Hiệu chỉnh view `resources\views\backend\chude\create.blade.php`

@extends('backend.layout.master')

@section('title')
Thêm mới Chủ đề
@endsection

@section('feature-title')
Thêm mới chủ đề    
@endsection

@section('feature-description')
Thêm mới Chủ đề. Vui lòng nhập thông tin và bấm Lưu.
@endsection

@section('content')
<form id="frmChuDe" name="frmChuDe" method="post" action="{{ route('backend.chude.store') }}">
    {{ csrf_field() }}
    <div class="form-group">
        <label for="cd_ten">Tên chủ đề</label>
        <input type="text" class="form-control" id="cd_ten" name="cd_ten" aria-describedby="cd_tenHelp" placeholder="Nhập tên chủ đề">
        <small id="cd_tenHelp" class="form-text text-muted">Nhập tên chủ đề. Giới hạn trong 50 ký tự.</small>
    </div>
    <button class="btn btn-primary">Lưu</button>
</form>
@endsection

@section('custom-scripts')
<script>
    $(document).ready(function () {
        $("#frmChuDe").validate({
            rules: {
                cd_ten: {
                    required: true,
                    minlength: 3,
                    maxlength: 50
                },
            },
            messages: {
                cd_ten: {
                    required: "Vui lòng nhập tên Chủ đề",
                    minlength: "Tên Chủ đề phải có ít nhất 3 ký tự",
                    maxlength: "Tên Chủ đề không được vượt quá 50 ký tự"
                },
            },
            errorElement: "em",
            errorPlacement: function (error, element) {
                // Thêm class `invalid-feedback` cho field đang có lỗi
                error.addClass("invalid-feedback");
                if (element.prop("type") === "checkbox") {
                    error.insertAfter(element.parent("label"));
                } else {
                    error.insertAfter(element);
                }
                // Thêm icon "Kiểm tra không Hợp lệ"
                if (!element.next("span")[0]) {
                    $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                        .insertAfter(element);
                }
            },
            success: function (label, element) {
                // Thêm icon "Kiểm tra Hợp lệ"
                if (!$(element).next("span")[0]) {
                    $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>")
                        .insertAfter($(element));
                }
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass("is-invalid").removeClass("is-valid");
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).addClass("is-valid").removeClass("is-invalid");
            }
        });
    });
</script>
@endsection

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo