Parsley - 在表单顶部显示所有错误

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% 做的，因为我从这里 post 得到了很多帮助：

希望能帮到和我有同样问题的大家。如果有人需要解释或需要使用上述代码的帮助，请务必发表评论或给我发私信。

干杯！

Parsley - 在表单顶部显示所有错误

Parsley - Show all errors on top of form

forms

jquery

parsley.js