parsley.js 捕获所有错误并通过 javascript alert() 输出

Question

我想在单个事件中使用 pasley v2.8 捕获表单上的所有错误，然后通过标准 javascript 警报显示这些错误。

由于在此 SO question about the fieldinstance functionality 中的帮助，我之前已经完成了部分工作。但是，另一个问题中的代码与一个函数一起工作，因为每个表单元素都失败了。

我想要的是一个在整理完所有错误后只触发一次的事件。我相信这是通过最近的 form:error 事件完成的。由于 getErrorsMessages() 似乎不起作用，我编写的代码无法正常工作。到目前为止我所拥有的是...

$('#form').parsley().on('form:error', function (formInstance) {
    var errorMsg = ParsleyUI.getErrorsMessages(formInstance);
    alert(errorMsg);
});

Answer 1

使用 formInstance 遍历每个字段并检索错误消息。像这样

<form class="demo-form">
    <input type="text" name="field1" required />
    <input type="text" name="field2" required />
    <input type="submit" />
</form>

<script>
$(function () {
    $('.demo-form').parsley().on('form:error', function (formInstance) {
        var errors = [];

        // You have access to each field instance with `formInstance.fields`
        for (var idx in formInstance.fields) {
            errors.push((formInstance.fields[idx].getErrorsMessages()));

            // Use $element to access the jQuery element of each field
            console.log(formInstance.fields[idx].$element);
        }

        alert(errors);
    });
});
</script>

如果您想删除由 Parsley 自动显示的每个字段旁边的消息，您可以将以下属性添加到您的表单中：data-parsley-errors-messages-disabled。参见 this answer。

parsley.js 捕获所有错误并通过 javascript alert() 输出

parsley.js catching all errors and outputting via a javascript alert()

jquery

parsley.js