输入值不在欧芹上.js addAsyncValidator 方法 param

Question

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

标记

<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="[e-mail]"
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>

杰奎里

$(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 "[e-mail]" even when input value is changed by the user
"id": "{{.User.ObjectID.Hex}}"
}
});
});

Answer 1

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

这意味着这段代码

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

被评估为此

{
"data": {
"email": "[e-mail]",
"id": "some hex value"
}
}

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

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

---

现在关于如何做你想做的事，请注意我不是欧芹的用户.js所以我可能在这里弄错了，但从查看文档来看，在我看来：

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

data-parsley-remote上的文档说(强调我的)：

定义将调用以验证输入内容的 URL。 例如，data-orsley-remote="http://url.ext"。如果网址包含 字符串"{值}"，该值将在 URL 中替换它(典型的 RESTful API)，否则该值将作为数据参数传递， 键是输入的名称或 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}}"
}
});
});