How should error corresponding to an AJAX request be passed to and handled at the client-side?

Question

I have the following form for my users to change their email addresses.

<form enctype="multipart/form-data" id="email_change_form" method="post" action="/my_account/">
<table> 
<tr> 
  <td> 
    <label for="id_email">E-mail address</label>:
  </td> 
  <td> 
    <input name="email" value="a@a.com" maxlength="75" type="text" id="id_email" size="30" /> 
  </td> 
  <td class="error_email">
  </td> 
</tr> 
</table> 
<input type="hidden" name="form_id" value="email_change_form" /> 
</form>

Upon clicking the save button (whose code is not shown), the form gets posted to the server ajaxly with the following jQuery code:

$(".save_button").click(function() {
    var $form = $("#email_change_form")
    url = $form.attr("action");

    $.post(url, $form.serialize(), 
      function(data) {
          //upon success, the server returns the new email (data.email) in a json dictionary. 
        },
        "json"
      );      
    }
  })

Once the server received the POST, it needs to verify that the new email does not already exist in the database (ie. email needs to be unique). Say the server detects a duplicate email, I am not sure how to communicate the error back to the client-side. I was tempted to add an entry "duplicate_email: true" to the json dictionary and return it to the client-side. I, somehow, feel that this isn't the right approach.

Please advise the right approach(es) for this scenario. How should the server pass the error back to the client-side? And how should the error be captured at the client-side? Thanks.

` I was tempted to add an entry "duplicate_email: true"` That's exactly what you need to do :) — PeeHaa, Aug 04 '11 at 23:05

score 11 · Answer 1 · edited May 23 '17 at 12:00

11

If you want to do it the Right Way™, make your services RESTful. In this case, the appropriate status code is probably "409 Conflict", which Wikipedia defines as "Indicates that the request could not be processed because of conflict in the request, such as an edit conflict". (See also REST HTTP status codes for failed validation or invalid duplicate.)

So have your server output a "409 Conflict" header, and in your client, check status. $.post() won't do it as you can only register a success handler, so you'll need to use $.ajax() like this:

$.ajax({
  statusCode: {
    409: function() {
      alert('duplicate');
    }
  }
});

edited May 23 '17 at 12:00

Community

1
1

answered Aug 04 '11 at 23:13

mahemoff

44,526
36
160
222

1

Thanks for the solution. RESTful, however, is somewhat an overkill for the prototype that I am working. Having that said, this approach is definitely something that I will consider at a later stage. Cheers. – tamakisquare Aug 08 '11 at 23:30
Sure. It's definitely more upfront design and API wrangling than other techniques and doesn't always make sense for a quick prototype. – mahemoff Aug 09 '11 at 09:30

score 2 · Accepted Answer · answered Aug 04 '11 at 23:06

2

The best practice would probably be to return an error object like this:

{error:true,
 errorCode:123,
 errorMessage:"Duplicate Email",
 errorDescription:"The email you entered (john@johndoe.com) already exists"
}

Then you can track a list of error codes/messages specific to your application.

answered Aug 04 '11 at 23:06

citizen conn

15,300
3
58
80

Thanks for your solution. As I am working on just a prototype, for now, I have decided to go with a simplified version of yours - having an error object with the errorMessasge field. Cheers. – tamakisquare Aug 08 '11 at 23:32

How should error corresponding to an AJAX request be passed to and handled at the client-side?

2 Answers2