ahmadajah03 Sat Apr 2020 1 year ago

Contoh Validasi Form dengan Ajax pada Laravel 7

Hari ini, saya akan memberi tahu Anda contoh jquery ajax form validation laravel 7. Tutorial ini akan memberi Anda contoh sederhana validasi postle ajax laravel 7. Di sini Anda akan belajar laravel 7 ajax show error validation. Saya akan menunjukkan kepada Anda tentang validasi ajax di laravel 7.

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 7 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 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.

routes/web.php

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

Langkah 2: Buat 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 app/Http/Controllers /HomeController.php .

Dalam controller ini kita akan menulis tiga metode untuk tampilan dan posting 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;
     
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 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 7 Ajax Validation Example - ItSolutionStuff.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 7 Ajax Validation - ItSolutionStuff.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 dapat membantu Anda ...

validation ajax laravel