Parsley - 在表格顶部显示所有错误答案

【问题标题】：Parsley - Show all errors on top of formParsley - 在表格顶部显示所有错误
【发布时间】：2016-05-25 11:19:28
【问题描述】：

我刚刚完成了我用欧芹制作的表格。我第一次使用欧芹，所以我还不是 100% 熟悉它。

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

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

我做了一个简短的 sn-p，向你们展示我的真正意思。

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

【问题讨论】：

标签： jquery forms parsley.js

【解决方案1】：

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

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

【讨论】：

嗯，是的。这正是我的想法。问题是我无法做到这一点。

【解决方案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

我希望我能帮助遇到和我一样问题的每个人。如果有人在使用上述代码时需要一些解释或帮助，请务必发表评论或给我发私信。

干杯！

【讨论】：