Question

我正在尝试在未验证表单输入时向控制台输出错误消息列表。我正在使用parsley.js。

这是我正在使用的javascript。这有效，但我得到了每个错误的重复，我不确定是什么导致这个？

(document).ready(function() {
    $("#demo-form").parsley();
    // listen for error messages
    $.listen('parsley:field:error', function(fieldInstance){
        // get error messages
        ParsleyUI.getErrorsMessages(fieldInstance);
        // Log error messages to console using input id to identify
        console.log(fieldInstance.$element.attr('id'));
    });
});

**更新**

根据要求，我给出了一个有效的例子。我有一个脚本将console.log输出到屏幕顶部的div中，由于某种原因我无法在JSFiddle上使用它。但是，无论如何，您都可以在控制台中看到重复的输出。

http://jsfiddle.net/eah6sd99/4/

Answer 1

由于您要对表单进行两次验证，因此您会看到重复的字段。代码的相关部分是：

$.listen('parsley:field:validate', function () {
  validateFront();
});

$('#demo-form .btn').on('click', function () {
  $('#demo-form').parsley().validate();
  validateFront();
});

$('.next').on('click', function () {
    var current = $(this).data('currentBlock'),
      next = $(this).data('nextBlock');

    if (next > current)
      if (false === $('#demo-form').parsley().validate('block' + current))
        return;

当您点击＆＃34;下一步＆＃34;按钮，在您的条件中触发parsley().validate('block' + current)，验证该组。

另外，只要您点击$('#demo-form').parsley().validate();中的.btn，就会#demo-form，这意味着您需要两次验证表单的相同部分。

要解决此问题，您只需删除$('#demo-form .btn').on('click', function () {代码即可。请查看this jsfiddle以获取有效工作示例（我已将所有document.ready代码合并，以使其更具可读性。）

如果要显示表单上方的消息，可以使用以下代码执行此操作：

$.listen('parsley:field:error', function(fieldInstance){
    var messages = ParsleyUI.getErrorsMessages(fieldInstance);
    $('.bs-callout-warning').append('<b>' +
        fieldInstance.$element.parent().find('label').text() + 
        '</b><br />' + 
        messages + '<br />');
});

检查this jsfiddle。

使用Parsley.js

1 个答案: