Petersilie - Zeige alle Fehler oben auf Formular

Question

Ich habe gerade eine Form fertig, die ich mit Petersilie gebaut habe. Ich habe zum ersten Mal Petersilie verwendet, daher bin ich immer noch nicht 100% damit vertraut.

Also dachte ich, dass ich alle Fehler anzeigen möchte, die in den ungültigen Eingabefeldern am oberen Rand des Formulars aufgetreten sind. Aber ich weiß wirklich nicht, wie genau ich das machen könnte. Ich habe bereits versucht mit .clone() und aber dann geht alles komisch und die ganze Seite ist voller Fehler ..

Ich würde jede Lösung schätzen, die Sie haben könnte!

Ich machte einen kurzen Ausschnitt, um euch zu zeigen, was ich eigentlich meine.

$('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! Ich habe dieses Ding nach dieser ganzen Zeit in Gang gebracht. Das Problem bestand darin, herauszufinden, wie man Fehler beheben kann, die vom Benutzer behoben wurden, und den Fehler nicht mehr als einmal zu verwenden.

Hier ist der Code, die es möglich gemacht hat:

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

    }); 

}); 

einfach deutlich zu machen, das ist meine nicht zu 100% tun, wie ich hier eine Menge Hilfe von diesem Posten hatte: Parsley.js - Display errors near fields AND in a combined list above form

Ich hoffe, dass ich jedem helfen kann, das gleiche Problem zu haben, das ich hatte. Wenn jemand eine Erläuterung benötigt oder Hilfe benötigt, um den obigen Code zu verwenden, vergewissere dich, dass du entweder einen Kommentar hinterlässt oder mir eine private Nachricht schickst.

Prost!

Answer 2

Sie wollen keine Fehler bevölkern vorab zu, clone oder appendTo verwenden.

Ich denke, Sie könnten eine errorsContainer angeben, die eine <div> auf Anfrage im oberen Abschnitt erstellen würde.