validation - Parsley.js - 在字段附近和表单上方的组合列表中显示错误

Question

是否可以将 Parsley.js 配置为同时显示其错误消息...
a) 在各个字段旁边，并且
b) 在页面其他地方的组合列表中
...同时？

此外，是否可以使用返回生成错误的字段的超链接来呈现错误消息？

谢谢。

更新:

接受的答案是一个很好的例子(感谢milz!)但它需要更多的改进。

为了其他读者的利益，这是我更新的代码，其中...

第一次验证失败后，错误消息不再重复(在原始示例中，尝试生成错误，然后在字段中反复按退格键 - 每次击键都会向列表中添加一条新消息)

错误消息采用同一表单组中的 LABEL 文本(对于没有有意义的单个标签的 radio 和复选框很方便)

当用户修复错误消息时，它们会立即从列表中删除。

整个错误面板都有一个标题，并根据它是否有内容而隐藏/显示。

提供 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>

Answer 1

要完成你想要的，你需要使用 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 .