动态添加 select 时 jQuery 验证错误

Question

我有一个表单，当有人希望(例如)向家庭“添加另一个成人”时，会动态添加 HTML block 。

我希望每个字段都有一个唯一的名称，因此我使用了一个计数器:第一个成人的名字字段是“firstName1”，第二个字段是“firstName2”，依此类推。

因为我想向字段添加自定义消息(并且 Validate 插件没有 messages() 方法)，所以我尝试在将 HTML 添加到 DOM 后立即添加规则。

这对于文本输入来说效果很好，但对于选择元素会抛出错误 - 'TypeError: d is undefined'。

例如:

$("input[name='city" + counter + "']").rules("add", {required:true, messages: {required:"Please enter a city."
}});

...工作正常。但是...

$("input[name='state" + counter + "']").rules("add", {required:true, messages: {required:"Please enter a state."
}});

...标识一个选择框，引发错误。

行为是一致的。添加了多个选择，并且以上面所示的方式向其中任何一个添加规则都会引发错误。

我会提到所有选择框都有一个值为“”的初始选项，因此所需的验证应该可以正常工作。

但是，当然，它永远不会有机会。添加规则时抛出错误。

有人知道为什么会发生这种情况吗？

Answer 1

对于选择，您应该使用 select[name=foo] 而不是 input[name=foo]:

$("select[name='state" + counter + "']").rules("add", {required:true, messages: {required:"Please enter a state."
}});