error div not being populated

Question

Would someone have a look at this and tell me what I am doing wrong? I am not getting anything back from this JQ function and the error div is empty. I'm really new to JQ so go real easy on me please.

$(function() {
  $('#form').submit(function(  ) {
    $(this).find('.error').hide();
    try {
      $.ajax({
        'url':      $(this).attr('action'),
        'type':     $(this).attr('method'),
        'data':     $(this).serialize(),
        'dataType': 'json',
        'success':  function( $response, $textStatus, $XMLHttpRequest ) {
          if( typeof($response.status) != 'undefined' && $response.status == 'OK' ) {
          } else if( typeof($response.errors) != 'undefined' ) {
            $.each($response.errors, function( $field, $message ) {
              $('#' + $field)
                .addClass('invalid')
                .siblings('.error')
                  .text($message)
                  .show();
            });
          } else {
            throw new Error('Undecipherable response from the server!');
          }
        },
        'error': function( $XMLHttpRequest, $textStatus, $errorThrown ) {
        }
      });
    } catch( $err ) {
      // Display global error or redirect to 500 page.
    }
  });
});

---

<form method="post" action="1.php" id="form">
  <input type="text" name="test" value="" id="test" />
  <input type="submit" name="submit" value="submit" id="submit" />
</form>
<div class="error"></div>

Answer 1

The first problem I can see is that div.error is not a sibling element of the input, so jQuery's looking in the wrong place.

                +-----------------------------------------------+
                |                                               |
              form                                          div.error
                |
     +----------+------------+
     |                       |
  input                   input

If you place the error div within the form:

<form method="post" action="1.php" id="form">
  <input type="text" name="test" value="" id="test" />
  <input type="submit" name="submit" value="submit" id="submit" />
  <div class="error"></div>
</form>

Then it should work. I'd also recommend using fieldset tags to reduce the scope for confusion:

<form method="post" action="1.php" id="form">
  <Fieldset>
        <input type="text" name="test" value="" id="test" />
        <input type="submit" name="submit" value="submit" id="submit" />
        <div class="error"></div>
  </fieldset>
</form>

That way there's only one sibling error div (though admittedly in this case the .error div is a sibling of both inputs. This may, of course, be deliberate (since a submit button can't really generate an error or be itself invalid.