I am trying to output a "missing fields" textbox in my form if the fields are empty, here are my codes for context:

Controller/Function

public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'category_name'=>'required|max:191',
            'category_description'=>'required|max:191',
        ]);
        if($validator->fails())
        {
            return response()->json([
                'status'=>400,
                'erros'=>$validator->messages(),
            ]);
        }
        else {
            $category = new HmsBbrCategory;
            $category->category_name = $request->input('category_name');
            $category->category_description = $request->input('category_description');
            $category->save();
            return response()->json([
                'status'=>200,
                'message'=>'Category Added!',
               
            ]);
        }
        
    }

AJAX

<script>
    $(document).ready(function (){
        $(document).on('click', '.add_category', function(e){
            e.preventDefault();
            var category_data = {
                'category_name': $('.category_name').val(),
                'category_description': $('.category_description').val(),
            }
            
            //token taken from laravel documentation
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // console.log(category_data);
            $.ajax({
                type: "POST",
                url: "/clinical/bbr-category-configuration",
                data: "category_data",
                dataType: "json",
                success: function (response){
                    if(response.status == 400)
                    {
                        $('#saveform_errList').html("");
                        $('#saveform_errList').addClass('alert alert-danger');
                        $.each(response.errors, function (key, err_values) {
                            $('#saveform_errList').append('<li>'+err_values+'</li>');
                        });
                    }
                }
            });
        });
    });
</script>

I also output the error id by adding this to my modal:

<ul id="saveform_errList"></ul>

I tested it in my console if error 400 works, and it does along with showing which fields are missing, this is done by simply adding console.log(response); in my ajax

so I tried showing this same error but in the modal itself, so inside if(response.status==400) I added the following as shown above:

                 if(response.status == 400)
                {
                    $('#saveform_errList').html("");
                    $('#saveform_errList').addClass('alert alert-danger');
                    $.each(response.errors, function (key, err_values) {
                        $('#saveform_errList').append('<li>'+err_values+'</li>');
                    });
                }

I only get the alert-danger UI though:

What am I missing?