Laravel 9 upload image with ajax validation jQuery error

Question

Whats wrong with my code? i use laravel 9, ajax, jQuery validation, and everytime i click submit, always show error like the one below appears

This display error:

{message: "validation.required (and 2 more errors)",…}
errors: {first_name: ["validation.required"], last_name: ["validation.required"],…}
message: "validation.required (and 2 more errors)"

My Controller:

public function store(Request $request)
    {
        $request->validate([
            'first_name'    =>  'required',
            'last_name'     =>  'required',
            'image'         => 'required|mimes:jpg,jpeg,png|max:1024',
        ]);

        $file = Request()->file('image');
        $file_name = Str::random(20) . '.' . $file->getClientOriginalExtension();
        $file->move(public_path('images'), $file_name);

        $form_data = [
            'first_name'        =>  $request->first_name,
            'last_name'         =>  $request->last_name,
            'image'             =>  $file_name
        ];

        AjaxCrud::create($form_data);
        return response()->json(['success' => 'Data added successfully.']);
    }

My Route:

Route::get('/', [AjaxCrudController::class, 'index']);
Route::resource('ajax-crud', AjaxCrudController::class);

My Form:

<div class="modal fade" id="addmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form action="javascript:void(0)" name="addmodal" id="addform" class="form-horizontal"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="first_name" class="form-label">First Name</label>
                        <input type="text" class="form-control" name="first_name" id="first_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="last_name" class="form-label">Last Name</label>
                        <input type="text" class="form-control" name="last_name" id="last_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="image" class="form-label">Select Profile Image</label>
                        <input type="file" class="form-control" name="image" id="image" required>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" name="addbutton" id="addbutton" class="btn btn-primary" value="Add" />
                        <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

My Script:

<script>
    $(document).ready(function(){

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    
        // Add modal
        $('#create_record').click(function(){
            $('#addmodal').modal('show');
            $('.modal-title').text('Add New Record');
            $('#addbutton').val('Add');
            $('#addaction').val('Add');
        });
    
        // Save Data
        if ($('#addform').length > 0) {
            $('#addform').validate({
                        rules: {
                            first_name: 'required',
                            last_name: 'required',
                            image: 'required',
                        },
                        messages: {
                            first_name: 'First name required!',
                            last_name: 'Last name required!',
                            image: 'Image required!',
                        },
            submitHandler: function (form) {

                event.preventDefault();
                    $.ajax({
                        data: $('#addform').serialize(),
                        url:'{{ route('ajax-crud.store') }}',
                        method:'POST',
                        contentType: false,
                        cache:false,
                        processData: false,
                        dataType:'json',
                        success:function(data)
                        {
                            $('#addform')[0].reset();
                            $('#addmodal').modal('hide');
                            $('#user_table').DataTable().ajax.reload(); 
                            iziToast.success({ 
                                title: 'Data added successfully.',
                                message: '{{ Session('success')}}',
                                position: 'topCenter'
                            });
                        }
                    })
                } 
            });   
        }
    });
</script>

......................................................................................................