TypeError: a is undefined + Uncaught TypeError: Cannot read property 'length' of undefined

Question

I am using jQuery 1.11.1 and I am getting this error in Firebug's console:

TypeError: a is undefined

and

Uncaught TypeError: Cannot read property 'length' of undefined 
m.extend.each 
(anonymous function) 
j 
k.fireWith 
x 
b

in Google Chrome's console.

Here is the screenshot from the console: https://i.sstatic.net/pQqNq.jpg

My javascript code is this:

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

            $('#submit').on('click', function(e) {

                e.preventDefault();


                var formData = new FormData();

                formData.append('username', $('#username').val());
                formData.append('email', $('#email').val());
                formData.append('password', $('#password').val());
                formData.append('password_confirmation', $('#password_confirmation').val());

                $.ajax({
                    url:         'registration',
                    method:      'post',
                    processData: false,
                    contentType: false,
                    cache:       false,
                    dataType:    'json',
                    data:        formData,
                    beforeSend: function()
                        {
                            $('#ajax-loading').show();
                            $(".validation-error-inline").hide();
                        }
                    })
                    .done(function(data) {

                        if (data.validation_failed == 1)
                        {
                            var arr = data.errors;

                            $.each(arr, function(index, value)
                            {
                                if (value.length != 0)
                                {
                                    $("#" + index).after('<span class="text-error validation-error-inline">' + value + '</span>');
                                }
                            });
                            $('#ajax-loading').hide();

                        }


                    })
                    .fail(function(jqXHR, ajaxOptions, thrownError) {
                        alert('No response from server');
                    });
                    return false;

            });
        });
    </script>

And I find out that when I comment out this part:

$.each(arr, function(index, value)
    {
        if (value.length != 0)
        {
            $("#" + index).after('<span class="text-error validation-error-inline">' + value + '</span>');
        }
});
$('#ajax-loading').hide();

Then I get no error. Why is $.each causing the problem?

Any idea how to fix that?

Btw. I am using Laravel and

Answer 1

Change:

var arr = data.errors;

To:

var arr = data.error;

And:

$("#" + index).after('<span class="text-error validation-error-inline">' + value + '</span>');

To:

$("#" + index).after('<span class="text-error validation-error-inline">' + value[0] + '</span>');