Parsley.js - отображать ошибки возле полей И в комбинированном списке выше формы
Можно ли настроить Parsley.js для отображения его сообщений об ошибках как ... а) рядом с отдельными полями, И б) в комбинированном списке в другом месте на странице ... одновременно?
Кроме того, возможно ли отобразить сообщения об ошибках с гиперссылкой на поле, которое сгенерировало ошибку?
Благодарю.
ОБНОВИТЬ:
Принятый ответ - фантастический пример (спасибо, милз!), Но он требует немного доработки.
Для удобства других читателей, вот мой обновленный код, в котором ...
Сообщения об ошибках больше не дублируются после неудачной первой проверки (в исходном примере попробуйте сгенерировать ошибку, а затем повторно нажимать клавишу Backspace в поле - новое сообщение добавляется в список для каждого нажатия клавиши)
Сообщение об ошибке принимает текст LABEL в той же группе форм (удобно для радиоприемников и флажков, которые не имеют отдельных значимых меток)
Сообщения об ошибках удаляются из списка на лету, когда они исправлены пользователем.
Вся панель ошибок имеет заголовок и скрыта / отображается в зависимости от того, имеет ли она содержимое или нет.
Bootstrap стиль, макет и петрушка конфигурации предоставляются.
В ответ на вопрос Адриана Родригеса об отображении сообщений над полями, вы можете изменить расположение сообщений об ошибках Parsley по умолчанию, выполнив следующие 2 шага:
// 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>