用过validate的都知道,它是通过name去找到相应的节点,然后再去处理规则的内容,那如果多个相同name会如何?
大致如下
<form id="demoForm">
<ul class="list">
<li class="title">
<input type="text" name="title" />
</li>
<li class="title">
<input type="text" name="title" />
</li>
</ul>
</form>
这时候我们尝试用上validate
<script>
$('#demoForm').validate({
rules: {
'title': { required: true },
}
});
</script>
发现永远只有第一个title验证提示效果。
查找源码得知,elements函数中有下面的判断,
// select only the first element for each name, and only those with rules specified
if ( this.name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
return false;
}
我看了有些文章说注释那段代码或者进行重写,但我个人觉得也不一定需要这样改。
既然插件要求name不能重复,那我们可以通过改写name属性,同时运用validate提供的rules()方法可以动态新增/移除规则。
具体代码思路如下:
<form id="demoForm">
<ul class="list">
<li class="title">
<input type="text" class="demo-title" />
</li>
<li class="title">
<input type="text" class="demo-title" />
</li>
</ul>
</form>
<script>
$('#demoForm').validate({
rules: {}
});
$('.demo-title').each(function (i,v) {
$(v).attr('name', 'demoTitle'+i);
$(v).rules('remove', 'required');
$(v).rules('add',{
required: true
})
})
</script>
实现思路如下:
1.既然无法相同name,那就保持每一个name的唯一性。
2.通过rules('remove')和rules('add')来管理规则,而不直接定义在rules:{}对象内。
3.保持先移除,再新增的原则,可以顺带处理动态增减的规则。
可以解决的问题:
1.表单元素动态增减的验证规则判断。
2.另辟蹊径不改源码的基础下,通过循环保持name的唯一性使用validate。