0

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.

Dan P.
  • 1,707
  • 4
  • 29
  • 57
  • This question appears to be off-topic because it is about a server-side problem, while the supplied code and problem description is about client-side functionality, nor is there is not enough information (lacking headers and post-body) to troubleshoot the 400 error (e.g. `getFormObj` is proprietary/non-standard). – zamnuts Jun 24 '14 at 00:48
  • You believe it's a server side issue? Please check at the image link in the desc. We can see the script is receiving `POST http://localhost:3000/signup/local 400 (Bad Request)`, and the client-side should be detecting that. – Dan P. Jun 24 '14 at 00:49
  • Sorry @Dany-P, i misunderstood the question. Your question is "Why does jQuery not use the `error` handler given a 400 response from the server?" -- correct? – zamnuts Jun 24 '14 at 00:50
  • Possible duplicate: http://stackoverflow.com/questions/12734714/jquery-ajax-error-handling-http-status-codes – zamnuts Jun 24 '14 at 00:52
  • Yeah, my login form detects the same 400 response, and the $.ajax is pretty similar. – Dan P. Jun 24 '14 at 00:53
  • Thought it could be a duplicate, but not a duplicate of that question (or not well-answered). Tried the suggestions, it didn't work. – Dan P. Jun 24 '14 at 01:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56154/discussion-between-dany-p-and-zamnuts). – Dan P. Jun 24 '14 at 01:01

0 Answers0