JQuery Ajax提交错误消息堆栈

JQuery Ajax Submit Error Messages Stack

本文关键字：消息 堆栈 错误 提交 Ajax JQuery      更新时间：2023-09-26

我有一个表单，它有必需的字段。当您单击"继续"但未在所需字段中输入任何内容时，它们会显示错误。如果您再次单击"继续"而未在所需字段中输入任何内容，则上一条错误消息将保留，并在其下方创建一条新消息。我该怎么做才能避免这种情况发生。

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

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

您可以更改此

$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
      })
   );
}
相关文章：