Richard R Richard R - 2 years ago 308
jQuery Question

Parsley - Show all errors on top of form

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

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=""></script>
<div class="catch-errors">This field is required.<br>This field is required.</div>
<input type="text" required>
<input type="email" required>

Answer Source

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

        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() {

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

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


    // 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>');


  $.listen('parsley:field:success', function(ParsleyField) {

  // 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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download