Question

我在我的项目中使用Parsley进行表单验证。所述表单中的一个字段是必须唯一的ID - 所以我添加了自己的addAsyncValidator，并且在后端我返回404或200，具体取决于具有ID的条目是否已存在。

按下表单的提交按钮后，我使用

$("#frmobjectadd").submit(function(event){
    $(this).parsley().whenValidate().done(function() {
        //Ajax call to the backend to insert data here...
    }
});

处理异步验证问题。然而，使用这种方法的验证是有效的，我注意到，每次我提交表单时，至少只有三个Ajax调用是针对该字段进行的。此外，当表单有效时，数据将被发送到成功处理它的后端。在XHR日志中，我看到一个表明它成功的AJax响应，在这种情况下，我将用户重定向到另一个页面。尽管如此，Parsley仍然向远程验证器发送表单验证请求，因为它检查我刚插入的条目是否已存在于DB中。这导致在重定向发生之前显示错误消息很短的时间。有什么方法可以解决这个问题吗？

远程验证器：

Parsley.addAsyncValidator('objectexists', function (xhr) {
     return xhr.status === 200;
}, "/backend/insert.php?formfunction=checkIfUnique&projectid=<?php echo $projectid; ?>");

有问题的字段

<input type="text" required
    data-parsley-remote
    data-parsley-remote-validator="objectexists"
    data-parsley-remote-message="Object name already exists."
    class="form-control" id="id" name="id" value="" placeholder="Type in object name">

表单的Parsley初始化如下所示：

    $('#frmobjectadd').parsley({
        errorClass: 'has-error',
        classHandler: function(el) {
          return el.$element.closest(".form-group");
        },
        errorsWrapper: '<span class="help-block"></span>',
        errorTemplate: "<span></span>",
        errorsContainer: function(el) {
            return el.$element.closest('.form-group');
        }
    });

Answer 1

为什么不让Parsley处理submit事件，也不需要调用whenValidate。只需听取form:success或form:submit事件。

即使在成功提交之后，也会多次执行欧芹远程验证

1 个答案: