error div not being populated
<p>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.</p>

<pre><code>$(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' &amp;&amp; $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.
    }
  });
});
</code></pre>

<hr>

<pre><code>&lt;form method="post" action="1.php" id="form"&gt;
  &lt;input type="text" name="test" value="" id="test" /&gt;
  &lt;input type="submit" name="submit" value="submit" id="submit" /&gt;
&lt;/form&gt;
&lt;div class="error"&gt;&lt;/div&gt;
</code></pre>
