Parsley Remote 和附加参数答案

【问题标题】：Parsley Remote and Additional ParametersParsley Remote 和附加参数
【发布时间】：2014-05-15 23:39:54
【问题描述】：

我正在尝试将远程验证器与 Parsley 一起使用，但我似乎无法随请求发送其他数据。有问题的字段是电子邮件字段，我想将其发送到服务器以查看电子邮件地址是否“可用”。另外，我需要发送一个服务器需要的 id 参数。 id 参数嵌入在我的表单中的“主机”字段中。

所以，我尝试使用 Parsley DOM API，如下所示：

        <input type="text" class="form-control" tabindex="15" id="email" name='email'
            data-parsley-type="email" data-parsley-type-message="Must be a valid email format"
            data-parsley-required="true" data-parsley-required-message="Email is required"
            data-parsley-remote="/invitation/allowed"
            data-parsley-remote-options='{ "type": "get", "data" : { "id": function() {return $("#host").val(); } }}'>

在 API 配置的最后一行中，我尝试了各种组合来将主机字段的值放入我的 URL。这些包括转义函数中的引号；并证明 'host'（或 '#host'）作为 id 属性的值。在每种情况下，我只能通过 URL 获取我的电子邮件地址。

请注意，我可以毫无问题地传递文字（例如 { "id": "TestTest" }）。

我也尝试过如下使用javascript：

<script type="text/javascript" src="/js/parsley.remote.js"></script>
<script type="text/javascript">$('#employee-form').parsley({})</script>

<script type="text/javascript">
    $('#email').parsley().addConstraint('remote',
    {
        url: '/invitation/allowed',
        type: 'GET',
        data: {
            id: function () { return $('#host').val() }
        }
    })
</script>

当我这样做时，我有两个问题：没有在 URL 中设置 id，而且基本 url 不正确 - 它调用当前页面的地址（不是 /invitation/allowed）。

几个小时前问的这个问题，类似：Remote validation for a field which depends on others

【问题讨论】：

标签： javascript validation parsley.js

【解决方案1】：

我遇到了同样的问题，想在每个请求中传递一个 API 密钥，所以我提交了一个包含该功能的拉取请求。我认为它很快就会正式发布，请在此处查看拉取请求：

https://github.com/guillaumepotier/Parsley.js/pull/645

【讨论】：

谢谢 jsnandrew，我确实看到了这个请求。看起来它可以解决问题。

【解决方案2】：

Parsley pull request #645 似乎没有完全解决这个问题。它允许您在 addAsyncValidator() 调用中指定 ajax 选项，但这些选项是在调用时评估的，而不是在发出 ajax 请求时进行评估（例如，ajax data 选项在页面加载时填充一次。）所以请求中传递的任何其他表单值都不是“实时”的，它们是调用 addAsyncValidator() 时的任何值。看来我们需要能够为data 参数指定一个函数。我对 Parsley.js 代码做了一个小调整，允许这样做：

validateString中的现有代码：

  // Merge options passed in from the function with the ones in the attribute
  var remoteOptions = $.extend(true, options.options || {}, Parsley.asyncValidators[validator].options);

然后我的补充：

  if (typeof remoteOptions.data === 'function') {
      remoteOptions.data = remoteOptions.data();
  }

那么在你的代码中：

    <input type="text" ... id="host" data-parsley-remote="" data-parsley-remote-validator="invitation" />
    <input type="text" ... id="email" data-parsley-remote="" data-parsley-remote-validator="invitation" />

    <script>
    window.Parsley.addAsyncValidator(
        'invitation',
        function (xhr) {
            return xhr.status == 200;
        },
        '/invitation/allowed',
        {
            data: function () {
                return {
                    host: $('#host').val(),
                    email: $('#email').val();
                };
            }
        }
    );
    </script>

除了销毁异步验证器并在每次相关表单值更改时重新创建它之外，我没有看到任何其他方法。

注意两件事：（1）函数替换未添加到其中的数据，以及（2）如果any，您似乎需要进行异步验证相关输入的变化。

【讨论】：