Parsley.js: muestra errores cerca de campos Y en una lista combinada de arriba

¿Es posible configurar Parsley.js para mostrar sus mensajes de error tanto ... a) al lado de los campos individuales, Y b) en una lista combinada en otra parte de la página ... al mismo tiempo?

Además, ¿es posible presentar mensajes de error con un hipervínculo al campo que generó el error?

Gracias.

ACTUALIZAR:

La respuesta aceptada es un ejemplo fantástico (¡gracias milz!) Pero necesitaba un poco más de refinamiento.

Para el beneficio de otros lectores, aquí está mi código actualizado en el que ...

Los mensajes de error ya no se duplican después de fallar la primera validación (en el ejemplo original, intente generar un error y luego presione repetidamente la tecla de retroceso en un campo: se agrega un nuevo mensaje a la lista por cada pulsación de tecla)

El mensaje de error toma el texto de LABEL en el mismo grupo de formularios (útil para radios y casillas de verificación que no tienen etiquetas individuales que sean significativas)

Los mensajes de error se eliminan de la lista sobre la marcha cuando el usuario los corrige.

Todo el panel de error tiene un título, y se oculta / muestra dependiendo de si tiene contenido o no.

Estilo Bootstrap, diseño y configuración de perejil proporcionados.

En respuesta a la pregunta de Adrián Rodríguez sobre la visualización de los mensajes ARRIBA de los campos, puede cambiar la ubicación de los mensajes de error predeterminados de Parsley con los siguientes 2 pasos:

// A. CHANGE the 'errorsContainer' callback to...

    errorsContainer: function(el) {
      return el.$element.closest(".control").find(".top"); // Errors will be placed inside the 'div.control > div.top' elements.
    }

// B. Additionally, you will either need to manually add '<div class='top'></div>'
//    wherever you want the errors to appear. Alternatively, use a little
//    JQuery to add these elements to the whole form, as follows...

    // 1.5 PREPEND each .control div with a new container for errors
    $(".control").prepend("<div class='top'></div>");

    // 2. Parslify the form...
    etc.

// 1. Configure Parsley for Bootstrap 3 Forms
//
window.ParsleyConfig = {
  successClass: "has-success",
  errorClass: "has-error",
  classHandler: function(el) {
    return el.$element.closest(".form-group");
  },
  errorsContainer: function(el) {
    return el.$element.closest(".control");
  },
  errorsWrapper: "<span class='help-block parsley-messages'></span>",
  errorTemplate: "<span></span>"
};


// 2. Parslify the form...
$("#theForm").parsley();


// 3. Configure Parsley to display combined validation-errors-list
//
$(function() {


  // Convenience members
  $.validationErrors = {

    container: $('div.validation-errors-container'),

    list: $('div.validation-errors-container ul.validation-errors-list'),

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

  };



  // NB: Event names pertain to Parsley V2.0  


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

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

    $.validationErrors.removeItem(fieldName);

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

    // Loop through all the messages
    for (var i in messages) {
      // Create a message for each error
      var fieldLabel = fieldInstance.$element.closest(".form-group").find("label:first");
      var fieldLabelText = fieldLabel.clone().children().remove().end().text().trim();
      var fieldName = fieldInstance.$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(fieldInstance) {
    $.validationErrors.removeItem(fieldInstance.$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 + "]:first").focus();

  });

});

body {
  padding: 10px;
}
/* PARSLEY FORM VALIDATION */

/* ensure field-spans injected by parsley don't take up space when empty... */

.parsley-messages {
  display: none;
}
.parsley-messages.filled {
  display: block;
}
/* aggregated parsley error message display... */

div.validation-errors-container {
  display: none;
}
div.validation-errors-container.filled {
  display: block;
}
div.validation-errors-container ul.validation-errors-list {
  margin: 0;
  padding: 0;
}
div.validation-errors-container ul.validation-errors-list li {
  color: rgb(169, 68, 66);
  list-style: outside none disc;
  margin-left: 16px;
  padding-left: 1em;
  text-indent: -0.7em;
}
div.validation-errors-container ul.validation-errors-list li a {
  color: inherit;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>

<!-- VALIDATION ERRORS CONTAINER -->

<div class="validation-errors-container panel panel-danger" role="alert" aria-labelledby="validation-errors-heading" aria-live="assertive">
  <div class="panel-heading" id="validation-errors-heading"><strong>Alert!</strong> Please correct the following errors...</div>
  <div class="panel-body">
    <ul class="validation-errors-list"></ul>
  </div>
</div>


<!-- BOOTSTRAP 3 FORM -->
<form class="form-horizontal" id="theForm">

  <div class="form-group">
    <label class="control-label col-xs-2">
      Name <span class="required-indicator" title="Required">*</span>
    </label>
    <div class="control col-xs-10">
      <input type="text" name="userName" class="form-control" data-parsley-required="true">
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-2">
      Gender <span class="required-indicator" title="Required">*</span>
    </label>
    <div class="control col-xs-10">
      <label class="checkbox-inline">
        <input type="radio" data-parsley-required="true" name="gender" value="F" />Girl
      </label>
      <label class="checkbox-inline">
        <input type="radio" name="gender" value="M" />Boy
      </label>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-2">
      Email <span class="required-indicator" title="Required">*</span>
    </label>
    <div class="control col-xs-10">
      <input type="text" name="userEmail" class="form-control" data-parsley-type="email" data-parsley-required="true">
    </div>
  </div>


  <button type="submit" class="btn btn-primary">Submit</button>

</form>