Here is my view(Ajax)

                $('#basicInfoForm').submit(function(e){
                        e.preventDefault();
                        let formData = new FormData(this);
                        $.ajax({
                            type: "POST",
                            url: "{{route('profile.basic_info')}}",
                            dataType: 'json',
                            data: formData,
                            contentType: false,
                            processData: false,
                            beforeSend:function(){
                                $("#fountainG").fadeIn(1000);
                            },
                            success: function(response){
                               $.each(response.errors, function (key, value) { 
                                 $("#fountainG").fadeOut(1000);
                                 $('.alert-danger').fadeIn(2000);
                                 $('.alert-danger').append('<span>' value '</span>' '<br>');
                                 setTimeout(function() {
                                    $('.alert-danger').fadeOut(4000, 'swing');
                                }, 3000);
                                 
                               });
                            },
                            error: function(data){
                                iziToast.error({
                                title: 'Upload Error',
                                message: data.avatar,
                                position: 'topRight'
                            });
                            }
                        });
                    });

And, here is my controller

    public function updateBasicInformation(Request $request)
    {
        $basic_info = Validator::make($request->all(), [
            'fullname' => 'required|min:2|max:255',
            'phone_number' => 'required|numeric|min:10',
            'email' => 'required|unique:users',
            'country' => 'required',
            'address' => 'required',
        ], [
            'phone_number.min' => "The phone number must be at least 10 digits",
        ]);

        if($basic_info->fails())
        {
            return response()->json([
                'errors'=> $basic_info->errors()->all()
            ]);
        }
    }

So, basically, there is form with the ID:

basicInfoForm

and the div with the class -alert-danger displays the error. But when I submit the form more than once, it keeps on duplicating the errors even the ones that have been properly validated.

The error

How do I get around this, please?

I tried changing the dataType to json but it didn't make any difference.

I am new to Ajax and Laravel

CodePudding user response：

On each submit clear all the errors from UI:

$('#basicInfoForm').submit(function(e){

e.preventDefault();

$('.alert-danger').remove();

// ...

});

CodePudding user response：

on every submit call you are appending errors and not clearing previous error. you can do this to fix this.

remove previous error div from DOM and append new error div on AJAX success.

success: function(response){

$('.alert-danger').remove();

$.each(response.errors, function (key, value) { 
 //

}