javascript - 使用 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;

当您单击“下一步”按钮时，您会在条件中触发 parsley().validate('block' + current)，从而验证该组。

此外，每当您从 单击 .btn 时，您都会获得 $('#demo-form').parsley().validate(); #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 .