Undefined variable $errors Laravel in modal form

Question

i got an error when opening modal. This is my code :

<div>
<x-button onclick="viewFormAdd()" data-bs-toggle="modal" type="button">Add New Data</x-button>
</div>

<script>
function viewFormAdd() {
        $.get("{{ route('kategori.create') }}", {},
            function(data, status) {
                $('.viewmodal').html(data).show();
                $('#modalCreateKategori').modal('show');
            }
        );
    }
</script>

createKategori.blade.php

<x-modal modalId="modalCreateKategori" modalTitle="Tambah Kategori">
<form method="post" action="{{ route('kategori.store') }}" class="formtambah">
    @csrf
    <div class="grid grid-rows-2">
        <div>
            <x-label>Nama Kategori</x-label>
            <x-input type="text" name="nama_kategori" id="nama_kategori" />
            @error('nama_kategori')
                <small>{{ $message }}</small>
            @enderror
        </div>
        <div class="justify-end items-center">
            <x-button type="submit">Simpan</x-button>
        </div>
    </div>
</form></x-modal>

AJAX :

<script>
$(document).ready(function() {
    $('.formtambah').submit(function(e) {
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "post",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: "json",
            success: function(response) {
                if (response.tersimpan) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Tersimpan!',
                        text: response.tersimpan,
                        showConfirmButton: false,
                        timer: 1500
                    })
                    $('.btn-close').click();
                    dataKategori();
                }
            },
            error: function(xhr, thrownError) {
                alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
            }
        });
        return false;
    });
});</script>

My Controller :

public function create()
{
   return view('kategori.createKategori');
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(KategoriRequest $request)
{
   $kategori = new Kategoris;
    $kategori->namakat = $request->nama_kategori;
    $kategori->save();

    $msg = [
        'tersimpan'=> 'Produk baru berhasil tersimpan!'
    ];

    return response()->json($msg);
}

My KategoriRequest :

class KategoriRequest extends FormRequest{

public function authorize()
{
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array<string, mixed>
 */
public function rules()
{
    return [
        'nama_kategori' => 'required'
    ];
}

public function messages()
{
    return[
        'nama_kategori.required' => 'Maaf, nama kategori harus diisi'
    ];
}

}

When im opening the modal, the modal not working and got error "Undefined variable $errors (View: C:\xampp\htdocs\newsinartimur_laravel_9\resources\views\kategori\createKategori.blade.php)"

when im inspect on browser tab network, i got this

Request URL: http://localhost:8000/api/kategori/create
Request Method: GET
Status Code: 500 Internal Server Error
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin

but when deleting this

@error('nama_kategori')
   <small>{{ $message }}</small>
@enderror

the modal and form working properly. i don't get it the mistake.

Answer 1

Actully, you need to check the @if ($errors->any()) first before accessing @error('nama_kategori'); So try this.

@if ($errors->any())
@error('nama_kategori')
   <small>{{ $message }}</small>
@enderror
endif