Петрушка - Показать все ошибки поверх формы

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

Хорошо! У меня эта работа работает все это время. Проблема заключалась в том, чтобы выяснить, как сделать возможным удаление ошибок, которые были исправлены пользователем, и не использовать одну и ту же ошибку более одного раза.

Вот код, который сделал возможным:

$(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% моих рук дело, как у меня было много помощи от этого поста здесь: Parsley.js - Display errors near fields AND in a combined list above form

Надеюсь, что я смогу помочь всем, у кого была такая же проблема. Если кому-то нужно какое-то объяснение или нужна помощь, используя вышеуказанный код, обязательно оставите комментарий или отправьте мне личное сообщение.

Cheers!

Answer 2

Вы не хотите, чтобы предварительно заполнить ошибки, используйте clone или appendTo.

Я думаю, вы могли бы указать errorsContainer, который создавал бы <div> по запросу в верхней части.