Failing to get input values from my form into formData object

Hi, I'm trying to store a new slider into my database via AJAX POST request to resource controller, however the data I fill into my form is not being sent since I'm getting the following error:

errors
:
body
:
["The body must be at least 10 characters."]
image
:
["The image must be a file of type: jpeg, jpg, png ."]
title
:
["The title must be at least 5 characters."]
__proto__
:
Object
message
:
"The given data was invalid."

This is obviously the request failing validation because input values are not properly being retrieved, I'm using formData for this :

This is my JQuery AJAX code:

$('.form_new_button').click(function(){
        
        var linked_entry = $(this).attr("data-link");
        console.log(linked_entry);
        
        
        
        
        $.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
        });
        

        switch(linked_entry) {
            case "sliders":
            
            
                var form = $(this).closest('form');
                console.log('new slider button clicked');
        
                var formData = new FormData();
                formData.append('title', $("input[name='title']").val());
                formData.append('body', $("textarea[name='body']").val());
                formData.append('image', $("input[name='image']").prop('files')[0]);
                formData.append('isVisible', $("input[name='isVisible']").val());
                
                
            
                $.ajax({

                async: true,
                url: '/sliders',
                type: 'POST',
                data: formData,
                dataType: 'JSON',
                processData: false,
                contentType: false,
            
                success: function (data) { 
                    $('.form_valid_container').html('<span class="form_valid_text">✓ '+ data.success +'</span>');
                    form.trigger("reset");
                    console.log(data.success, data.errors);
                },
            
                error: function (data){
                    var errors = data.responseJSON;
                    console.log(errors);
                
                    $.each(errors , function(){
                        $('.form_error_container').html('<span class="form_error_text">✘ '+ errors.message +'</span>')
                    }); 
                }
                
                
                });

            break;
                    
                    

            default:
                        
        }
                
    });

This is my new slider modal, this is where I fill all the fields and send them via POST request after I click the button with class form_new_button:

<div class="modal_overlay_maincontainer closeable form_new_modal" data-link="sliders">
    <form class="modal_container" method="POST" >
        <i class="close fa fa-times-circle" title="Cerrar"></i>
        <h2 class="modal_title">Nueva Diapositiva</h2>
        <div class="modal_body_container">
            <div class="modal_body_check_container">
                <span class="modal_body_options_title">Visible</span>
                <input class="modal_body_check" name="isVisible" type="checkbox"  title="La diapositiva se subirá al pasador de diapositivas">
            </div>
            <div class="modal_body_check_container">
                <span class="modal_body_options_title">Imagen</span>
                <input type="file" name="image">
            </div>
            <input class="modal_input" type="text" name="title" placeholder="Titulo de la diapositiva" required>
            <textarea class="modal_input_textarea" name="body" placeholder="Contenido de la diapositiva" required></textarea>
        </div>
        <div class="modal_footer_container">
            <button class="modal_footer_add_button form_new_button" type="button" data-link="sliders" title="Crear nueva entrada">Crear</button>
            <button class="modal_footer_reset_button form_reset_button" type="button" title="Resetear los campos">Reset</button>
        </div>
    </form>
</div>

This is my form request for storing sliders:

public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            
            'title' => 'min:5|max:100',
            'body' => 'min:10|max:250',
            'image' => 'required | mimes:jpeg,jpg,png | max:1000',
            
        ];
    }

Here is my store method inside my resource controller, this is where the POST request is sent and where I sav a new slider in the database:

public function store(StoreSlider $request)
    {
        $slider = new Slider();
        $slider->title = $request->title;
        $slider->body = $request->body;
        $slider->image = $request->image;
        $slider->isVisible = $request->isVisible;
        $slider->save();
        
        return response()->json($slider);
    }