andriajah Sat May 2020 1 year ago

Tutorial Ajax Form Validation di Laravel

Dalam Tutorial ini, saya ingin memandu cara menggunakan ajax form validation di laravel 6. kita akan menggunakan validation laravel 6 dengan permintaan posting ajax. kami akan memberikan respons kesalahan dan menampilkannya di sisi depan menggunakan ajax laravel 6.

Validasi formulir adalah persyaratan dasar dari formulir apa pun. kami harus menerapkan validasi walaupun 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 6 seperti yang diperlukan, email, sama, unik, tanggal, integer dll menggunakan jquery ajax post, dapatkan, masukkan, atau hapus permintaan. kita akan menggunakan fungsi validasi Validator 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 ketika false. Jadi jika Anda ingin ajax form validasi di aplikasi laravel maka Anda berada di tempat yang tepat.

Cukup ikuti langkah di bawah ini untuk membuat contoh ajax validation:

Langkah 1: Tambahkan Route

Pada langkah pertama kita akan membuat dua route baru untuk demo. jadi buka file routes/web.php Anda dan tambahkan rute berikut.

routes/web.php

Route::get('my-form','HomeController@myform');
Route::post('my-form','HomeController@myformPost')->name('my.form');

Langkah 2: Create Controller

Pada titik ini, sekarang kita harus membuat controller baru sebagai HomeController. Jadi jalankan perintah di bawah ini dan buat controller baru.

php artisan make:controller HomeController

Setelah perintah di bawah, Anda akan menemukan file baru di path ini app/Http/Controllers/HomeController.php.

Dalam controller ini kita akan menulis tiga metode untuk view dan post ajax seperti yang tercantum di bawah ini:

1) myform()

2) myformPost()

Jadi, mari kita salin kode di bawah ini dan letakkan file HomeController.php.

app/Http/Controllers/HomeController.php

<?php
     
namespace App\Http\Controllers; App\Http\Controllers;
     
use Illuminate\Http\Request; Illuminate\Http\Request;
use Validator; Validator;
     
class HomeController extends Controller HomeController extends Controller
{
     
    /**
     * Display a listing of the myform.
     *
     * @return \Illuminate\Http\Response
     */
    public function myform()public function myform()
    {
     return view('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: Create View File

Pada langkah terakhir, mari kita buat myform.blade.php (resources/views/myform.blade.php) untuk tata letak dan kita akan menulis kode desain dan kode ajax jquery, jadi tuliskan kode berikut:

resources/views/myform.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 6 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 6 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 kita siap untuk menjalankan contoh kita jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://localhost:8000/my-form 

Saya harap ini bisa membantu anda...

tutorial laravel laravel 6 ajax validation laravel