Question

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

Answer 1

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

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));
          })
        })
      }
    }
  })
}

Answer 2

你可以改变这个

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

TO

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
      })
   );
}

JQuery Ajax提交错误消息堆栈

2 个答案: