- vừa được xem lúc

Sử dụng Ajax để Validation Form trong Laravel 8

0 0 14

Người đăng: Gấu con

Theo Viblo Asia

Trong bài viết này mình sẽ chia sẻ cách sử dụng Ajax để validation Form và hiển thị error messages cho từng trường trên màn hình.
Nếu các bạn không muốn sử dụng Ajax để validation form thì có thể tham khảo bài viết trước của mình tại link sau: Validation Form với Error Messages trong Laravel 8
Các bạn hãy theo dõi ví dụ bên dưới để hiểu hơn về cách hoạt động của nó nhé.

Step 1: Add Route

routes/web.php

<?php use Illuminate\Support\Facades\Route; Route::get('my-form','_@.com');
Route::post('my-form','_@.com')->name('my.form');

Step 2: Create Controller

Bước này mình sẽ tạo 2 methods trong Controller, method myform() sẽ hiển thị form tạo user với kiểu là get request và method myformPost() sẽ xử lý validation dữ liệu với kiểu là post request.
app/Http/Controllers/HomeController.php

<?php namespace App\Http\Controllers; use Illuminate\Http\Request;
use Validator; class HomeController extends Controller
{ /** * Display a listing of the myform. * * @return \Illuminate\Http\Response */ public function myform() { return view('myform'); } /** * Display a listing of the myformPost. * * @return \Illuminate\Http\Response */ public function myformPost(Request $request) { $validator = Validator::make($request->all(), [ 'first_name' => 'required', 'last_name' => 'required', 'email' => 'required|email', 'address' => 'required', ]); if ($validator->passes()) { return response()->json(['success'=>'Added new records.']); } return response()->json(['errors'=>$validator->errors()]); }
}

Step 3: Create View File

Bước này mình sẽ tạo file myform.blade.php và thêm code html và code jquery sử dụng ajax.
resources/views/myform.blade.php

<!DOCTYPE html>
<html>
<head> <title>Laravel 8 Ajax Validation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <style type="text/css"> .error_msg {color: red;} </style>
</head>
<body> <div class="container"> <h2>Laravel 8 Ajax Validation</h2> <div class="alert alert-danger print-error-msg" style="display:none"> <ul></ul> </div> <form> {{ csrf_field() }} <div class="form-group"> <label>First Name:</label> <input type="text" name="first_name" class="form-control" placeholder="First Name"> </div> <p class="error_msg" id="first_name"></p> <div class="form-group"> <label>Last Name:</label> <input type="text" name="last_name" class="form-control" placeholder="Last Name"> </div> <p class="error_msg" id="last_name"></p> <div class="form-group"> <strong>Email:</strong> <input type="text" name="email" class="form-control" placeholder="Email"> </div> <p class="error_msg" id="email"></p> <div class="form-group"> <strong>Address:</strong> <textarea class="form-control" name="address" placeholder="Address"></textarea> </div> <p class="error_msg" id="address"></p> <div class="form-group"> <button class="btn btn-success btn-submit">Submit</button> </div> </form>
</div> <script type="text/javascript"> $(document).ready(function() { $(".btn-submit").click(function(e){ e.preventDefault(); var _token = $("input[name='_token']").val(); var first_name = $("input[name='first_name']").val(); var last_name = $("input[name='last_name']").val(); var email = $("input[name='email']").val(); var address = $("textarea[name='address']").val(); $.ajax({ url: "{{ route('my.form') }}", type:'POST', data: {_token:_token, first_name:first_name, last_name:last_name, email:email, address:address}, success: function(data) { if($.isEmptyObject(data.errors)){ $(".error_msg").html(''); alert(data.success); }else{ let resp = data.errors; for (index in resp) { $("#" + index).html(resp[index]); } } } }); }); }); </script> </body>
</html> 

Step4: Chạy chương trình và kiểm tra kết quả

Form đăng ký user

Màn hình thông báo lỗi khi submit form bằng Ajax

Màn hình đăng ký user thành công!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Sử dụng Swagger để xây dựng API documentation

Giới thiệu về Swagger. RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web (thiết kế Web services) để tiện cho việc quản lý các resource.

0 0 1k

- vừa được xem lúc

Ví dụ CRUD với Laravel và Vuejs.

1. Cài đặt Laravel. composer create-project --prefer-dist laravel/laravel vuelaravelcrud. .

0 0 139

- vừa được xem lúc

Một số tips khi dùng laravel (Part 1)

1. Show database query in raw SQL format. DB::enableQueryLog(); // Bật tính năng query logging. DB::table('users')->get(); // Chạy truy vấn bạn muốn ghi log.

0 0 68

- vừa được xem lúc

Inertiajs - Xây dựng Single Page App không cần API

Tiêu đề là mình lấy từ trang chủ của https://inertiajs.com/ chứ không phải mình tự nghĩ ra đâu nhé :v. Lâu lâu rồi chưa động tới Laravel (dự án cuối cùng mình code là ở ver 5.8), thế nên một ngày đẹp trời lượn vào đọc docs ver 8.

0 0 227