Ini adalah panduan singkat tentang contoh validasi form ajax laravel 8. Di sini Anda akan belajar validasi posting ajax laravel 8 jquery. mari kita bahas tentang laravel 8 ajax show validation error. yuk kita bahas tentang validasi ajax di laravel 8.
Validasi form adalah persyaratan dasar dalam bentuk apa pun. kita harus menerapkan validasi meskipun Anda menggunakan ajax atau formulir sederhana. Tetapi jika Anda bekerja dengan jquery ajax maka Anda juga dapat menggunakan validasi sisi server menggunakan laravel dan menampilkan pesan kesalahan di sisi depan.
Anda cukup menggunakan validasi laravel 8 seperti diperlukan, email, sama, unik, tanggal, integer dll menggunakan jquery ajax post, get, put atau delete request. kita akan menggunakan fungsi Validator make untuk membuat validasi dan memeriksa menggunakan fungsi pass ().
Dalam contoh ini saya akan menunjukkan kepada Anda bagaimana menggunakan validasi default laravel dengan jquery ajax. Di sini kami juga mencetak pesan validasi laravel saat salah. Jadi jika Anda ingin validasi formulir ajax di aplikasi laravel maka Anda berada di tempat yang tepat.
Ikuti saja langkah di bawah ini untuk membuat contoh validasi ajax:
Langkah 1: Tambahkan Route
Pada langkah pertama kita akan membuat dua route baru untuk demo. jadi buka file routes/web.php Anda dan tambahkan route berikut.
route/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('my-form', [HomeController::class, 'myform']);
Route::post('my-form', [HomeController::class, 'myformPost'])->name('my.form');Langkah 2: Buat Controller
Pada titik ini, sekarang kita harus membuat controller baru sebagai HomeController. Jadi jalankan perintah di bawah dan buat controller baru.
php artisan make:controller HomeControllerSetelah perintah di bawah ini Anda akan menemukan file baru di jalur ini app/Http/Controllers/HomeController.php .
Dalam controller ini kita akan menulis tiga metode untuk tampilan ajax dan memposting sebagai metode di bawah ini:
- myform()
- myformPost()
Jadi, mari kita salin kode di bawah ini dan letakkan di file HomeController.php.
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(['error'=>$validator->errors()->all()]);
}
}Langkah 3: Buat File View
Pada langkah terakhir, mari buat myform.blade.php (resources/views/myform.blade.php) untuk layout dan kita akan menulis kode desain dan kode ajax jquery, jadi masukkan kode berikut:
resources/views/myform.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Ajax Validation Example - Medikre.com</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>
</head>
<body>
<div class="container">
<h2>Laravel 8 Ajax Validation - Medikre.com</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>
<div class="form-group">
<label>Last Name:</label>
<input type="text" name="last_name" class="form-control" placeholder="Last Name">
</div>
<div class="form-group">
<strong>Email:</strong>
<input type="text" name="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<strong>Address:</strong>
<textarea class="form-control" name="address" placeholder="Address"></textarea>
</div>
<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.error)){
alert(data.success);
}else{
printErrorMsg(data.error);
}
}
});
});
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
</script>
</body>
</html>Sekarang kami siap untuk menjalankan contoh kami jadi jalankan perintah di bawah ini untuk menjalankan cepat:
php artisan serveSekarang Anda dapat membuka URL di bawah di browser Anda:
http://localhost:8000/my-formSaya harap ini dapat membantu Anda ...
Laravel Laravel 8 Ajax Form Validation Tutorial
andriajah