Kiểm tra ràng buộc dữ liệu (Validation) phía Client

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

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 #2206

Ngày đăng: Hồi xưa đó

Lượt xem: 162

Xem định dạng IN

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ề Khóa học

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

Chương trình học

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

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

Về trang chủ Về Khóa học

Vuexy

Files

Members

NỀN TẢNG

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

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

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

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ủ đề`:

Mục lục

Chương trình học

Chương trình học

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Vuexy

Files

Members

Kiểm tra ràng buộc dữ liệu (Validation) phía Client

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

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

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

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ủ đề`:

Mục lục

Chương trình học

Chương trình học

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

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

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