Parsley.js - 在字段附近显示错误，并在上面的组合列表中显示
Parsley.js - Display errors near fields AND in a combined list above form
是否可以配置 Parsley.js 以同时显示其错误消息...
a) 在各个字段旁边，并且
b) 在页面其他地方的组合列表中
...同时？
此外，是否可以通过返回生成错误的字段的超链接呈现错误消息？
谢谢。
更新：
接受的答案是一个很好的例子（感谢 milz！）但它需要更多的改进。
为了其他读者的利益，这是我更新的代码，其中...
第一次验证失败后错误消息不再重复（在原始示例中，尝试生成错误然后在字段中重复按退格键 - 每次击键都会将新消息添加到列表中）
错误消息采用相同的 LABEL 文本 form-group（对于没有有意义的单独标签的单选框和复选框很方便）
错误消息在用户修复后会即时从列表中删除。
整个错误面板都有一个标题，hidden/shown取决于它是否有内容。
Bootstrap 提供样式、布局和欧芹配置。
为了回答 Adrian Rodriguez 关于在字段上方显示消息的问题，您可以通过以下 2 个步骤更改 Parsley 默认错误消息的位置：
// 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>
要完成你想要的，你需要使用Parsley's events。看看事件的描述和下面代码的注释。
<div class="validation-errors"></div>
<form>
<input type="text" name="field1" required />
<input type="text" name="field2" required />
<input type="submit" />
</form>
<script>
$(document).ready(function() {
// validate form
$("form").parsley();
// Before each validation, clear the validation-errors of the div
$.listen('parsley:form:validate', function() {
$('.validation-errors').html('');
});
// When a field has an error
$.listen('parsley:field:error', function(fieldInstance){
// Get the error messages
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
// Get the field's name
var fieldName = fieldInstance.$element.attr('name');
// Loop through all the messages
for (var i in messages) {
// Create a message for each error
var $m = $('<p><a class="focus-' + fieldName + '" href="#">' + fieldName + ': ' + messages[i] + '</a><p>');
// Append the errors to the div
$('.validation-errors').append($m);
}
});
});
// When there's a click on a error message from the div
$(document).on('click', 'a[class^="focus-"]', function(){
// take the field's name from the class
var parts = $(this).attr('class').split('-');
$("[name=" + parts[1] + "]").focus();
});
</script>
这是一个演示 in Jsfiddle。
重要说明：我提供的代码使用了 Parsley 2.0.* 中可用的事件。如果您正在使用新的 Parsley 2.1.*，您应该使用正确的事件。而不是 parsley:form:validate 使用 form:validate 并将 parsley:field:error 替换为 field:error.
是否可以配置 Parsley.js 以同时显示其错误消息... a) 在各个字段旁边，并且 b) 在页面其他地方的组合列表中 ...同时？
此外，是否可以通过返回生成错误的字段的超链接呈现错误消息？
谢谢。
更新：
接受的答案是一个很好的例子（感谢 milz！）但它需要更多的改进。
为了其他读者的利益，这是我更新的代码，其中...
第一次验证失败后错误消息不再重复（在原始示例中，尝试生成错误然后在字段中重复按退格键 - 每次击键都会将新消息添加到列表中）
错误消息采用相同的 LABEL 文本 form-group（对于没有有意义的单独标签的单选框和复选框很方便）
错误消息在用户修复后会即时从列表中删除。
整个错误面板都有一个标题，hidden/shown取决于它是否有内容。
Bootstrap 提供样式、布局和欧芹配置。
为了回答 Adrian Rodriguez 关于在字段上方显示消息的问题，您可以通过以下 2 个步骤更改 Parsley 默认错误消息的位置：
// 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>
要完成你想要的，你需要使用Parsley's events。看看事件的描述和下面代码的注释。
<div class="validation-errors"></div>
<form>
<input type="text" name="field1" required />
<input type="text" name="field2" required />
<input type="submit" />
</form>
<script>
$(document).ready(function() {
// validate form
$("form").parsley();
// Before each validation, clear the validation-errors of the div
$.listen('parsley:form:validate', function() {
$('.validation-errors').html('');
});
// When a field has an error
$.listen('parsley:field:error', function(fieldInstance){
// Get the error messages
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
// Get the field's name
var fieldName = fieldInstance.$element.attr('name');
// Loop through all the messages
for (var i in messages) {
// Create a message for each error
var $m = $('<p><a class="focus-' + fieldName + '" href="#">' + fieldName + ': ' + messages[i] + '</a><p>');
// Append the errors to the div
$('.validation-errors').append($m);
}
});
});
// When there's a click on a error message from the div
$(document).on('click', 'a[class^="focus-"]', function(){
// take the field's name from the class
var parts = $(this).attr('class').split('-');
$("[name=" + parts[1] + "]").focus();
});
</script>
这是一个演示 in Jsfiddle。
重要说明：我提供的代码使用了 Parsley 2.0.* 中可用的事件。如果您正在使用新的 Parsley 2.1.*，您应该使用正确的事件。而不是 parsley:form:validate 使用 form:validate 并将 parsley:field:error 替换为 field:error.