Hướng dẫn chặn lỗi bằng jquery required

• Trang chủ
• Hướng dẫn học
• Laravel
• Validation - tùy chỉnh nội dung lỗi

Tùy chỉnh nội dung hiển thị lỗi

• Phần trước chúng ta đã biết tạo một validate là như thế nào, tuy nhiên câu hiển thị lỗi hiển thị là dạng mặc định có trong Laravel, trong phần này, chúng ta sẽ tùy chỉnh câu hiển thị lỗi như mong muốn, ví dụ hiển thị bằng tiếng Việt chẳng hạn.
• Dựa theo kết quả của bài Validation form đã làm, chúng ta thêm vào controller PostController.php một biến messages với nội dung như sau:

File Controller: PostController.php

public function showform() { return view('admin/create'); } public function validationform(Request $request) { echo "

";
        print_r($request->all());
    echo "

    $this->validate($request,[
        'title'=>'required|max:255',
        'description'=>'required'
    ], _$messages_);
}

• Khi này, nếu nhập title và description không đúng điều kiện trong Controller, thì sẽ báo lỗi, ví dụ ta bỏ trống 2 field này và click button Submit:

• Ta thấy nội dung lỗi đã được thay đổi theo tùy chỉnh của biến $messages.

Tùy chỉnh vị trí hiển thị lỗi

• Giả sử chúng ta muốn hiển thị nội dung báo lỗi ngay bên dưới trường cần nhập thì làm như thế nào? Laravel cung cấp một cách tùy chỉnh khá hay giúp điều khiển vị trí xuất hiện lỗi khá thuận tiện, đó là cách sử dụng hàm có sẵn $errors->first('name').
• Để thực hiện việc này, chúng ta cần viết lại controller PostController.php như sau:

File Controller: PostController.php

public function showform() { return view('admin/create'); } public function validationform(Request $request) { echo "

";
        print_r($request->all());
    echo "

VIẾT LẠI THÔNG BÁO LỖI TẠI VIEW: create.blade.php

    @csrf
    
Title

        _
_

    
Description

        _
_

    
Submit

• Khi này, nếu nhập title và description không đúng điều kiện trong Controller, thì nội dung lỗi sẽ xuất hiện như sau:

• Tới đây ta đã nắm được cơ bản validate của Laravel rồi, muốn tìm hiểu nhiều hơn thì các bạn xem tiếp trong trang chính thức của nó nhe.
• Bài tiếp theo chúng ta sẽ tạo bộ Insert - View - Update - Delete để hiểu rõ hơn cách hoạt động của Laravel.

Hầu hết các thư việc validate Javascript đều rất lớn và thường yêu cầu các thư viện đi kèm như jQuery. Nhưng sự thật chúng ta không thể dùng hết những thứ được đi kèm trong các thư viện đó. Việc đó gây ra việc bạn cần dùng 1 file thư viện quá nặng trong project nhưng lại không dùng hết, điều đó gây ra lãng phí tài nguyên. Vậy nên trong bài viết này, mình sẽ chỉ cho các bạn các cách validate một form trên Front-end một cách ngắn gọn và nhẹ nhất, có thể bạn sẽ không cần dùng đến những thư viện có sẵn nữa.

Nhưng vẫn phải chú ý rằng, việc Validate trên Front-end có thể qua mặt bởi những người coder nhưng chính chúng ta. Vậy nên luôn luôn validate những dòng code của bạn trên Server nhé. Trước hết chúng ta sẽ bắt đầu với những thứ cơ bản trước, hãy tìm hiểu Validate trên HTML thuần trước nhé.

Thông qua sự kết hợp giữa các loại đầu vào, cụ thể là các thẻ tag, ví dụ:

Và các thuộc tính xác thực, chẳng hạn như required và pattern, các trình duyệt có thể xác thực hợp lệ các đầu vào biểu mẫu và cảnh báo cho người dùng khi họ làm sai. Hỗ trợ các loại đầu vào và thuộc tính sẽ khác nhau theo từng loại trình duyệt, vậy đâu là cách để giải quyết và mẹo để tối đa hoá khả năng tương thích với trình duyệt với code của bạn?

Xác thực văn bản

Giả sử bạn có một trường văn bản muốn người dùng phải nhập nó trước khi có thể gửi form đi. Thì chỉ cần thêm thuộc tính required vào thẻ tag input và các trình duyệt sẽ hỗ trợ cảnh báo người dùng bắt họ phải điền thứ gì đó vào =))

HTML

Và đây sẽ là kết quả của trình duyệt Chrome

Nếu bạn muốn thêm số lượng kí tự tối thiểu và tối đa, hãy sử dụng minlength và maxlength. Ví dụ dưới đây yêu cầu người dùng phải nhập một đoạn văn bản nằm trong khoảng từ 3 đến 12 kí tự

Tiếp theo là thuộc tính pattern. Thuộc tính này cho phép bạn kiểm chứng Regex với giá trị đầu vào. Ví dụ nếu bạn yêu cầu mật khẩu chứa ít nhất 1 kí tự viết hoa, 1 kí tự viết thường và 1 chữ số, trình duyệt có thể xác thực điều đó cho bạn.

Hình trên có cái thông báo cho người dùng là Match the requested format. Nếu bạn muốn đổi cái thông báo đó thành một nội dung khác thì sao nhỉ? Hãy dùng thuộc tính title Nếu bạn cung cấp một thuộc tính title với pattern, giá trị của title sẽ được bao gồm trong bất kỳ thông báo lỗi nào nếu mẫu không khớp.

Xác thực số

Đối với thẻ input number thì nó chỉ cho phép bạn nhập các con số. Các trình duyệt sẽ từ chối chấp nhận các chữ cái và các ký tự khác hoặc cảnh báo người dùng nếu họ sử dụng chúng. Nhưng hãy cẩn thận, vì đối với type="number", bạn vẫn có thể nhập vào kí tự trên hệ điều hành Ubuntu, còn trên Window thì hình như là chữ d. Vậy nên hãy cho nó thêm một thuộc tính pattern để chắc chắn chỉ được nhập số.

Theo mặc định. number chỉ cho phép chúng ta nhập vào số nguyên. Nhưng chúng ta có thể thay đổi điều đó, bạn có thể nhập vào số kiểu float với thuộc tính step.

Bạn cũng nên sửa đổi của bạn pattern để cho phép số thập phân.

Nếu các số phải nằm giữa một tập hợp các giá trị, trình duyệt có thể xác thực các số dựa trên hai thuộc tính min và max.

Xác thực Email và URL

Cách tốt nhất để xác thực email và URL là cung cấp cho trình duyệt một Regex. Mẫu Regex dùng để xác thực email là một vấn đề khá sôi nổi. Vậy thì đâu mới là mẫu Regex để xác thực email chính xác nhất để thoả mãn thông số kỹ thuật RFC822?

Bạn có tin dưới đây là cách tốt nhất?

Regex trên cho phép bạn không nhập phần mở rộng phía sau @. Nhưng bạn vẫn muốn yêu cầu người dùng nhập thì hãy sử dụng Regex sau:

Cũng giống như email, URL cũng sẽ validate tương tự.

0

Regex là một thứ gì đó rất vi diệu. Nếu bạn giỏi Regex, bạn sẽ làm được cơ số thứ đấy

Xác thực ngày tháng

Cái xác thực ngày tháng này không phải ai cũng biết. Hầu hết mọi người sẽ dùng thư viện. Nhưng... có một vài loại đầu vào thực sự tuyệt vời không chỉ xác nhận ngày mà còn cung cấp các bộ chọn ngày gốc. Thật không may, Chrome, Edge và Mobile Safari là các trình duyệt duy nhất thực hiện nó. Firefox không áp dụng tính năng này.

Như trên, chúng ta có thể cung cấp một pattern cho trình duyệt

1

Trong các trình duyệt hỗ trợ, ngày đã chọn được hiển thị như sau: MM/DD/YYYY. Nhưng value thực tế là trong định dạng này : YYYY-MM-DD.

Bạn nên cung cấp hướng dẫn cho người dùng các trình duyệt không được hỗ trợ về định dạng này. Một cái gì đó như "Vui lòng sử dụng định dạng YYYY-MM-DD."

Nhưng chúng ta hoàn toàn có thể kiểm tra xem trình duyệt có hỗ trợ hay không để hiển thị cái message trên.

2

Ok, vậy là bài viết của mình đến đây là hết. Lần sau mình sẽ hướng dẫn các bạn Validate sử dụng Validate API trong Javascript. Hãy đón đọc nhé! Happy hacking!!!