带有 JS Promise 的 Parsley 自定义验证器答案

【问题标题】：Parsley Custom Validator with JS Promise带有 JS Promise 的 Parsley 自定义验证器
【发布时间】：2018-03-14 10:56:00
【问题描述】：

我已经在几个地方伸出援手，帮助很好，但没能成功。

希望你们能在这里帮助我。

我在 Flask 应用程序的模板页面中使用 JS。我正在使用欧芹验证来验证 Web 表单。我还创建了一个自定义验证器，它应该使用 axios 对后端进行 ajax 调用，以确定电子邮件地址是否已经注册。

我的 Flask 后端返回一个布尔字符串到我的 html 页面。所有这些看起来都是正确的。我正在恢复正确的价值。但是，当我在 axios 函数中退出“.then”函数时，Parsley 验证器无法工作/响应。

如果我删除 axios POST 调用。只需简单地说“return false”或“return true”，该功能就可以工作。验证消息返回到屏幕。

所以将 return 语句放在我的 .axios .then 函数中似乎存在问题？

有人可以看看我在这里做错了什么吗？我一生都无法弄清楚为什么它不起作用。

谢谢。

提姆。

我在这里包含了 FAILING JS 代码。

<script type="text/javascript">

window.Parsley.addValidator('existingEmail', {
    validateString: function(value) {

        // Performing a POST request
        var promise = axios.post('/api/v1.0/existingEmailCheck', {email : value})
          .then(function(response){
            var result = (response.data.toLowerCase() === "true");
            console.log(result)
            return result
          });  

         console.log(promise)

         return promise

    },
    messages: {
        en: "This email address has already been registered.",
    }

});

</script>

我还包含了一个稍加修改（没有 axios 调用）的代码，它可以在这里工作。

    <script type="text/javascript">

    window.Parsley.addValidator('existingEmail', {
        validateString: function(value) {

            var string = "false" //This Simulates the Incoming Data.

            var result = (string.toLowerCase() === "true");
                console.log(result)
                return result   //Always returns false (due to hard coding)
                //However this means that it triggers the error message and validation fails
                //When you change the string to "true" it works as expected and validates
        },
        messages: {
            en: "This email address has already been registered.",
        }

    });

</script>

该示例按预期工作。这让我相信第一个代码示例中的错误是在调用和返回 False 或 True 的 IF ELSE 之间的某个地方

人们能给我的任何帮助都会很棒！

【问题讨论】：

标签： javascript flask promise parsley.js

【解决方案1】：

我认为您需要返回一个 jQuery 承诺，而不是 axios 返回的任何内容（本机承诺？）。

FWIW，看起来你可以使用内置的 remote 验证器。

【讨论】：

【解决方案2】：

我自己只是尝试使用 Axios（想要取消 jQuery 并且它是一个庞大的库）。最终创建了一个 AsyncValidator（在幕后使用 Ajax）。

在您的 HTML 中只需导入 jQuery 和 Parsley

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/parsley.min.js"></script>

定义您的 DOM 元素以支持远程验证器

<input id="id" class="form-control" name="id" type="text" data-parsley-remote data-parsley-remote-validator='checkExists' placeholder="Username / ID" data-parsley-checkExists="" data-parsley-minlength="5" data-parsley-required-message="Please enter username / id" required>

在您的 index.js 文件中，添加您的异步验证器。

 Parsley.addAsyncValidator('checkExists', function (xhr) {
    return false === xhr.responseJSON;
  }, '/data-management/verify-data?filter=signup');

生成的 Ajax 请求是 /data-management/verify-data?filter=signup&id=value 值，即输入字段的值。

这最终对我有用。如果您需要帮助，请告诉我。

【讨论】：