Question

有人看看这个并告诉我我做错了什么吗？我没有从这个JQ函数得到任何东西，错误div是空的。我对JQ真的很陌生，所以请你真的很容易。

$(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

我能看到的第一个问题是div.error不是input的兄弟元素，所以jQuery看错了地方。

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

如果您将error div 放在表单中：

<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>

然后它应该工作。我还建议使用fieldset标签来减少混淆的范围：

<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>

这样只有一个兄弟error div（虽然在这种情况下，.error div确实是两个输入的兄弟。当然，可能是故意的（因为submit按钮不能真正生成错误或本身无效。

错误div没有被填充

1 个答案: