输入值不适用于 parsley.js addAsyncValidator 方法参数

Question

我很难获取输入的值（实时）并将其作为数据传递给 addAsyncValidator 方法。 addAsyncValidator 始终获取页面呈现时在输入的值属性上设置的值，而不是输入更改时的值。这是我的代码：

标记

        <form action="/edit/email" method="POST" id="my_form">
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="text"
                               class="form-control"
                               name="email"
                               id="email"
                               {{/* value="{{.User.Email}}" */}}
                               value="foo@bar.com"
                               data-parsley-required="true"
                               data-parsley-type="email"
                               data-parsley-whitespace="trim"
                               data-parsley-trigger="change"
                               data-parsley-remote
                               data-parsley-remote-validator="checkEmailTaken"
                               data-parsley-remote-message="">
                    </div>
                </div>
            </div>
            <button role="button" type="submit" class="btn btn-primary">Submit</button>
        </form>

JQuery

    $(function () {
        $("#my_form").parsley();

        $("#my_form").on("submit", function (e) {
            e.preventDefault();
            makeFormRequest(this); // Ajax call
        });

        Parsley.addAsyncValidator("checkEmailTaken", function (xhr) {
            if (404 === xhr.status) {
                r = $.parseJSON(xhr.responseText);
                this.addError("remote", { message: r.error });
            }
            return 200 === xhr.status;
        }, "/check/email/taken", {
                "data": {
                    "email": $("#email").val(), // The problem here is the val is always "foo@bar.com" even when input value is changed by the user
                    "id": "{{.User.ObjectID.Hex}}"
                }
            });
    });

Answer 1

当您的应用首次加载时，电子邮件始终与输入中的内容相同的原因是，这是您在 options 对象中作为最后一个参数传递给 [=14= 的值].

也就是说这段代码

{
    "data": {
        "email": $("#email").val(),
        "id": "{{.User.ObjectID.Hex}}"
    }
}

评价到此

{
    "data": {
        "email": "foo@bar.com",
        "id": "some hex value"
    }
}

...然后作为最后一个参数传递给 addAsyncValidator。

换句话说，$("#email").val() 只被评估一次，那是在你的 js 应用程序启动时，它不会在每次验证器发出 xhr 请求时被评估。

现在关于如何做你想做的事，请注意我不是 Parsley.js 的用户，所以我在这里可能会弄错，但通过查看文档，我觉得：

您想要的电子邮件值已经自动发送，但是因为您使用相同的 email 键传递选项对象，您实际上是在用您不需要的值覆盖您想要的值想要。

data-parsley-remote 上的文档说（强调我的）：

Define the url that will be called to validate the entered content. e.g. data-parsley-remote="http://url.ext". If the url contains the string "{value}", the value will replace it in the URL (typical of RESTful APIs), otherwise the value will be passed as a data parameter, with the key being the input's name or ID.

因此，如果我正确理解了文档，那么执行此操作就足够了：

$(function () {
    $("#my_form").parsley();

    $("#my_form").on("submit", function (e) {
        e.preventDefault();
        makeFormRequest(this); // Ajax call
    });

    Parsley.addAsyncValidator("checkEmailTaken", function (xhr) {
        if (404 === xhr.status) {
            r = $.parseJSON(xhr.responseText);
            this.addError("remote", { message: r.error });
        }
        return 200 === xhr.status;
    }, "/check/email/taken", {
        "data": {
            "id": "{{.User.ObjectID.Hex}}"
        }
    });
});

输入值不适用于 parsley.js addAsyncValidator 方法参数

input value not live on parsley.js addAsyncValidator method param

jquery

go

parsley.js