Error on Edit Post shows 422 (Unprocessable Entity) in Ajax call - ajax

Question

I keep getting a 422(Unprocessable Entity) error, how do I fix this?
The below is my code on ajax call, can someone help me on to fix this problem?
$(document).on('click', '.edit-post', function() {
$('.edit-modal').css('display','block');
$('.posts-table').css('display','none');
var id = $(this).attr('data-id');
var title = $(this).attr('data-title');
var slug = $(this).attr('data-slug');
var category = $(this).attr('data-category');
var featured_image = $(this).attr('data-image');
var body = $(this).attr('data-body');
$('#edit-post-form #edit-title').val(title);
$('#edit-post-form #edit-slug').val(slug);
$('#edit-post-form #edit-category').val(category);
//$('#edit-post-form #edit-image').val(featured_image);
$('#edit-post-form #edit-body').val(body);
$('#edit-id').val($(this).data('id'));
});
//Update New Post
$("#update-post").click(function(e) {
e.preventDefault();
id = $('#edit-id').val();
var title = $('#edit-post-form #edit-title').val();
var slug = $('#edit-post-form #edit-slug').val();
var category_id = $('#edit-post-form #edit-category').val();
var featured_image = $('#edit-post-form #edit-image').val();
var body = $('#edit-post-form #edit-body').val();
var form = new FormData();
form.append('title', title);
form.append('slug', slug);
form.append('category_id', category_id);
form.append('featured_image', featured_image);
form.append('body', body);
$.ajax({
type:'PUT',
url: "/updatepost/" + id,
headers: {
'X-CSRF-TOKEN' : $('input[name="_token"]').val()
},
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: form,
success: function(data) {
toastr.success('Successfully Updated Post!', 'Success Alert', {timeOut: 5000});
$('#'+ id).html("<tr id='" + data.id + "' class='item'><th>" + data.id + "</th><td>" + data.title + "</td><td>" + data.body + "</td><td>" + data.created_at + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-edit'></span> Edit</button></td></tr>");
$('.edit-modal').css('display','none');
$('.posts-table').css('display','block');
}
});
});
The data of the post will show in the edit form, but when I try to submit it after editing some fields, 422 Unprocessable entity keeps showing.