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。