如何使用jQuery远程验证表单中依赖于另一个字段的字段？

Question

我有一个表单，其中我使用远程验证来检查数据库中是否已存在电子邮件地址。然而，在这个表单上，用户可以在几个不同的“组”之间进行选择，每个组都有自己独特的电子邮件地址集（因此相同的电子邮件可以在每个组中存在一次）。

组选择是表单上的下拉菜单，电子邮件地址是具有远程验证的输入字段。我有一些问题。首先，我已经像这样设置了我的远程规则:

remote: {
    url: 'remote_script.php',
    data: {  group_id:  $('select.group_id').val() }
}

然而，这似乎是将group_id参数静态设置为select中第一个值。也就是说，如果我更改了select，然后再次触发远程验证，group_id参数不会改变。

首先，我该如何使该参数动态化，取决于表单中select的值？

其次，我如何手动触发电子邮件地址字段上的远程验证？当更改group_id select时，我希望重新触发电子邮件地址字段上的远程验证（而不更改字段的值）。我尝试使用：

$(selector).validate().element('.email_addr')

但是这似乎只触发了标准验证（必填，电子邮件），而没有触发远程调用。

- Kevin Jhangiani

---

@Adrian 感谢您的编辑，但我认为标题的第二部分实际上更难以理解！我认为为了搜索目的，在标题中加入一些关于这方面的参考信息会更有用。回想起来，我应该把它分成两个问题，但那是五年前的事了... - Kevin Jhangiani

Answer 1

我找到了解决我问题第二部分的方法：

 $(".email_addr").removeData("previousValue");

将删除远程请求的缓存，并使用 .element() 再次触发远程请求。

因此，我的代码如下：

$("select.group_id").change(function() {
    $(".email_addr").removeData("previousValue"); //clear cache when changing group
    $("#customer_form").data('validator').element('.email_addr'); //retrigger remote call
    //my validator is stored in .data() on the form
});

解决方案在这里找到：solution

我的问题的第一部分最初由@Jeffery To回答。

需要做的就是将参数的值更改为函数，而不仅仅是一个值。Jeffery的示例如下，供将来搜索此问题的人参考：

remote: {
  url: 'remote_script.php',
  data: {
    group_id: function () {
        return $('select.group_id').val();
    }
  }
}

- Kevin Jhangiani

---

这似乎对我不起作用：https://dev59.com/vmgu5IYBdhLWcg3wOUq- - Jason

另外，'validator选择器是从哪里来的？请看我上面的评论中的问题。 - Jason

@Jason，验证器选择器只是我为方便而做的。我像这样实例化验证器：v = $（'#form'）.validate（{...}）;然后我只是将v存储在表单数据中，以便稍后访问它。 - Kevin Jhangiani

这个未记录的 removeData 方法真是救了我的命！ - Clemorphy

这个帮助了我，在挖掘了2个小时后。 - Hafiz Fahad Munir

Answer 2

从远程验证的第二个示例中可以看出，函数（在验证期间进行评估）可用于数据，因此

remote: {
    url: 'remote_script.php',
    data: {
        group_id: function () {
            return $('select.group_id').val();
        }
    }
}

应该可以正常工作。

对于您的第二个问题，您是否尝试将验证规则传递给 validate()？

- Jeffery To

---

是的，你说得对，那对于动态数据是有效的。我从.validate()调用中返回原始验证器，然后做类似v.element('.email_addr')的操作，但似乎无法使其工作。你知道.element()是否会触发远程调用吗？ - Kevin Jhangiani

我不得不在远程选项中添加 async: false 才能让它对我起作用。 - despina

@KevinJhangiani - 你最后解决了这个问题吗？我也遇到了同样的问题 - 我可以进行多次远程调用，除非该字段返回有效值 - 在这种情况下，如果该字段被更改，它将不再进行远程调用。 - Jason

@Jason - 是的，请参见我上面接受的答案。关键是要调用这个函数：$（“.email_addr”）.removeData（“previousValue”）;在涉及到的字段上-删除此数据后，远程调用将重新执行。 - Kevin Jhangiani

@Jason，抱歉我现在才看到你的其他评论，我正在阅读并研究它...虽然我上面使用的代码对我有效，但是可能验证器js库自那时以来已经更新（我自提出这个问题以来没有升级过它）。 - Kevin Jhangiani