パセリ - フォームの上にすべてのエラーを表示

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>

あなたは、エラーに事前 cloneまたは appendToを使用したくない

Answer 1

大丈夫です！私はこの後、このことを働かせました。問題は、ユーザーが修正したエラーを削除し、同じエラーを2回以上使用しないようにする方法を理解することでした。ここで

がそれを可能にしたコードです： Parsley.js - Display errors near fields AND in a combined list above form

：

$(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％ではありません私は、私が持っているのと同じ問題を抱えている人を助けることを願っています。上記のコードを使用して説明を必要とする人や助けが必要な人は、コメントを残すか、私に私的なメッセージを送ってください。

乾杯！

Answer 2

。

errorsContainerと指定すると、最上部にオンデマンドで<div>が作成されます。