I am creating a JQuery powered registration form and I got everything to work now as I wanted except the showing of errors.

My previous code showed the errors just fine, but didn't have the loading sequence properly:

old code:
Code JavaScript:
$.ajax({
		type: 'POST',
		url: 'main/join_ajax',
		data: form_data,
		dataType: 'json',
		success: function(json)
		{
			if(json.status == "yes"){
				$('#loading').fadeOut(3000);
				$('#register_container').html("<h1>Registration has been successful</h1>").slideDown(1000);
			} else {
				$("#errors").prepend(json.message).slideDown(1500);
			}
		}
	});

My new code does everything properly in terms of registration but it does not show the errors, like if I leave the fields blank and what not the errors do not display at all like they did with the old code.

New code:
Code JavaScript:
$.ajax({
		beforeSend: function(){
			$('#register_container').slideUp(500);
			$('#loading').fadeIn(500);
		},
		type: 'POST',
		url: 'main/join_ajax',
		data: form_data,
		dataType: 'json',
	}).done(function(json){
		if(json.status == "yes"){
			$('#loading').fadeOut(10);
			$('#register_container').html("<h3>Registration has been successful</h3>").slideDown(500);
		} else if(json.status == "no") {
			$("#errors").prepend(json.message).slideDown(500);
		}
	});

Basically what happens now is the loading image just stays and nothing happens...

Also is there a better way to do this? I am confused with the promises and such.

Thank you!