使用 Parsley.js 时出现重复字段错误

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;

当您单击 "Next" 按钮时，您会在您的条件内触发 parsley().validate('block' + current)，从而使组生效。

此外，每当您单击 #demo-form 中的 .btn 时，您就会得到 $('#demo-form').parsley().validate();，这意味着您要对表单的同一部分进行两次验证。

要解决此问题，您只需删除 $('#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 时出现重复字段错误

Duplication of field error when using Parsley.js

javascript

parsley.js