Parsley - Show all errors on top of form

Question

I just finished a form i was building with parsley. I used parsley for the first time, so I am still not 100% familiar with it.

So, I was thinking that I'd like to display all the errors, that occured in the invalid input fields, at the top of the form. But I really don't know how exactly I could do that. I already tried using .clone() and .appendTo() but then everything goes weird and the whole page is filled with errors..

I'd appreciate every solution you guys might have!

I made a short snippet, to show you guys what I actually mean.

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

Okay! I got this thing working after all this time. The problem was to figure out, how to make it possible to remove errors that have been fixed by the user and not to use the same error more than once.

Here is the code that made it possible:

$(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();

  });

});

Just to make it clear, this is not 100% my doing as I had a lot of help from this post here: Parsley.js - Display errors near fields AND in a combined list above form

I hope that I can help everyone having the same problem that I had. If anyone needs some explaning or needs help using the above code, make sure to either leave a comment or send me a private message.

Cheers!

Answer 2

You don't want to pre-populate errors, use clone or appendTo.

I think you could specify an errorsContainer that would create a <div> on demand in the top section.