Question

我正在使用Parsley v2，我希望将所有错误放在表单末尾的div中，而不是内联。

我是通过将data-parsley-errors-container="#error-container"添加到有效的form来实现此目的的。

然而，如果我设计它，它会一直显示出来。我希望隐藏它，具体取决于表单是否有效。

每当有效状态发生变化时，我希望能够在has-errors标记中添加form类。

Parsley 2有一个pubsub和listener功能，而不是使用回调和选项。我甚至不确定从哪里开始。

我能做到

$.listen('parsley:form:validated', function(e){
  e.$element.toggleClass('error', !e.validationResult);
});

有效，但在字段中输入时不会更新。

据我所知，收听parsley:field:validated事件并没有让我看到表单的验证状态。

Answer 1

你是对的，'parsley:form:validated'只会在整个表格验证中被触发，而且听parsley:field:validated对整个表格验证状态不会说太多。

没有计划在Parsley中本地实现这种行为，因为Parsley不存储验证结果，并且每次所有字段上的所有验证器都无状态时重新运行。但是你可以用这种方式实现你想要的东西（如果有用，可以在doc中的一些例子部分添加）：

$('#form').parsley().subscribe('parsley:field:validated', function(fieldInstance){
  if ($('#form').parsley().isValid())
    $('#form').addClass('parsley-valid').removeClass('parsley-invalid');
  else
    $('#form').addClass('parsley-invalid').removeClass('parsley-valid');
});

注意：表单上的.subscribe（）也会监听所有字段事件。这样，可以为此表单监听每个字段验证，并运行form.isValid（）（不会触发事件，以避免无限循环）来重新计算全局表单状态。

这是一个选择，因为相当消耗，但它应该做的工作（我没有测试上面的代码，可能有拼写错误）

Parsley JS将类添加到表单中

1 个答案: