jQuery.validate动态规则以及相同name元素的验证问题

用过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。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容