$.ajax error function not detecting the HTTP 400 status code

I'm using similar code for the login form and it works fine. The server returns the same error if some fields were missing. POST http://localhost:3000/signup/local 400 (Bad Request). However my sign up form's ajax isn't detecting it.

Ajax:

$('#signup_form').submit(function (event) {
    $('#signup_processing_message').show();
    event.preventDefault();
    var fieldValues = getFormObj('signup_form');
    $.ajax({
      type: 'post',
      url: '/signup/local',
      data: fieldValues,
      success: function (response, textStatus, xhr) {
        if (xhr.readyState === 4 && xhr.status === 0) {
          alert('Aborted. Network issue.');
        } else if (response.message === 'success') {
          if ($('#signup_error_message').is(':visible')) {
            $('#signup_error_message').hide();
          }
          $('#signup_processing_message').html('Success');
          setTimeout(function (){ window.location.href = '/'; }, 500);
        } else {
          // Could this ever happen?
        }
      },
      error: function (response) {
        console.log(response);
        if ($('#signup_processing_message').is(':visible')) {
          $('#signup_processing_message').hide();
        }
        if (response.status === 400) {
          $('#signup_error_message').html('Please fill in the fields correctly.');
        } else {
          $('#signup_error_message').html('Please fill in the fields correctly.');
        }
        $('#signup_error_message').show();
      }
    });
  });


function getFormObj(formId) {
  var formObj = {};
  var inputs = $('#' + formId).serializeArray();
  $.each(inputs, function (i, input) {
    formObj[input.name] = input.value;
  });
  return formObj;
};

HTML

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <h1 class="text-center">SIGNUP</h1>
        <div class="well">
            <form role="form" id="signup_form">
                <div class="form-group">
                    <input type="text" class="form-control" id="signup_name" name="fullName" placeholder="Full Name">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" id="signup_email" name="username" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="signup_password" name="password" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-default btn-block">Signup</button>
                <div id="signup_error_message" class="alert alert-danger"></div>
                <div id="signup_processing_message" class="alert alert-success">Processing...</div>
            </form>
        </div>
        <p class="help-block text-center"><span class="glyphicon glyphicon-lock"></span> SSL Secure</p>
    </div>
</div>

We can clearly see the client-side is receiving the 400 code: http://screencast.com/t/uGxt8uMyOm

However, the error function doesn't get invoked at all.