Question

我刚刚完成了用欧芹建造的表格。我第一次使用欧芹，所以我仍然不是100％熟悉它。

所以，我想我想在表单顶部显示无效输入字段中出现的所有错误。但我真的不知道我究竟能做到这一点。我已经尝试过使用.clone()和.appendTo()但是一切都很奇怪，整个页面都充满了错误..

我很感激你们可能拥有的每一个解决方案！

我做了一个简短的片段，向你们展示我的意思。

$('button').on('click', function(e) {
  $('.catch-errors').css('display', 'block');
});

.catch-errors {
  display: none;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="catch-errors">This field is required.<br>This field is required.</div>
  <input type="text" required>
  <input type="email" required>
  <button>Submit</button>
</form>

Answer 1

您不想预先填充错误，请使用clone或appendTo。

我认为您可以指定errorsContainer，在顶部按需创建<div>。

Answer 2

好！这段时间以后，我把这件事搞定了。问题是弄清楚，如何能够删除用户已修复的错误，而不是多次使用相同的错误。

以下是使其成为可能的代码：

$(function() {

    // validate form
    $('#main-form').parsley({

        triggerAfterFailure: 'input change',

    });

  // Convenience members
  $.validationErrors = {

    container: $('.error-wrapper'),

    list: $('.catch-errors'),

    updateContainer: function() {
      // Hide/show container if list is empty/full
      $.validationErrors.container.toggleClass("filled", $.validationErrors.list.find("li:first").length > 0);
    },

    removeItem: function(sFieldName) {
      // Remove related error messages from list
      $.validationErrors.list.find('li[data-related-field-name="' + sFieldName + '"]').remove();
    }

  };

  // Before each validation, clear the validation-errors of the div
  $.listen('parsley:form:validate', function() {
    $.validationErrors.list.html();
  });

  // When a field has an error
  $.listen('parsley:field:error', function(ParsleyField) {

    var fieldName = ParsleyField.$element.attr('name');

    $.validationErrors.removeItem(fieldName);

    // Get the error messages
    var messages = ParsleyUI.getErrorsMessages(ParsleyField);

    // Loop through all the messages
    for (var i in messages) {
      // Create a message for each error
      var fieldLabel = ParsleyField.$element.closest("div").find("label:first");
      var fieldLabelText = fieldLabel.clone().children().remove().end().text().trim();
      var fieldName = ParsleyField.$element.attr("name");
      var $m = $('<li data-related-field-name="' + fieldName + '"><a data-related-field-name="' + fieldName + '" href="#na"><strong>' + fieldLabelText + '</strong> - ' + messages[i] + '</a></li>');
      $.validationErrors.list.append($m);
    }
    $.validationErrors.updateContainer();

  });

  $.listen('parsley:field:success', function(ParsleyField) {
    $.validationErrors.removeItem(ParsleyField.$element.attr('name'));
    $.validationErrors.updateContainer();
  });

  // When there's a click on a error message from the div
  $(document).on('click', 'a[data-related-field-name]', function() {

    // take the field's name from the attribute
    var name = $(this).attr('data-related-field-name');
    $("[name=" + name + "]").focus();

  });

});

为了说清楚，这不是我做的100％，因为我在这篇文章中得到了很多帮助：Parsley.js - Display errors near fields AND in a combined list above form

我希望我能帮助每个人遇到同样的问题。如果有人需要使用上述代码进行解释或需要帮助，请务必留下评论或发送私信。

干杯！

Parsley - 在表单上显示所有错误

2 个答案: