javascript - JQuery Ajax 提交错误信息栈

Question

我有一个包含必填字段的表格。当您单击继续时，它们会显示错误，但未在必填字段中输入任何内容。如果您在未在必填字段中输入任何内容的情况下再次单击继续，则先前的错误消息将保留，并在其下方创建一个新消息。我该怎么办才不会发生这种情况。

Answer 1

你可以改变这个

$fieldId.parent().append($('<span>').addClass('help-inline').append(error));

至

var fieldParent = $fieldId.parent();
if( fieldParent.has('#form-error') ) {
   $('#form-error').text(error);
} else {
   fieldParent.append(
      $('<span>', {
         id: 'form-error',
         'class': 'help-inline',
         text: error
      })
   );
}

Answer 2

现在您已经清楚了结构以及您希望它如何工作，这应该适合您。每次提交表单时只需删除所有以前的错误消息。

function submit_ajax_form() {
  $('.error_span').remove();
  // submits the form with Ajax especting a JSON response
  $('#usermgmtform').ajaxSubmit({
    success: function(response, statusText, xhr) {
      if (response['status'] == 'ok') {
        window.location.replace(response['location']);
      } else {
        jQuery.each(response['errors'], function(field, errors) {              
          jQuery.each(errors, function(i, error) {
            $fieldId = $('#id_'+field);                
            $fieldId.closest('.control-group').addClass('error');
            $fieldId.parent().append($('<span class="error_span">').addClass('help-inline').append(error));
          })
        })
      }
    }
  })
}