修改 jquery.validate.js 支持非form标签
修改 jquery.validate.js 支持非form标签
旺财的城堡
发布于 2018-11-20 16:38:24
发布于 2018-11-20 16:38:24
尝试使用markdown来写一篇blog，啦啦啦
源代码传送门：github
在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候，表单并不是一定包含在form之中，有可能是一个div弹层，有可能是嵌套在form里面的一个div，这个时候官方的validate就不能很好的支持了。对此，在官方的源代码基础上做小小的改动，就能兼容原有form方式，也能使用于非form方式，何乐而不为呢。
分析官方代码之后，能得知它都是通过element.form找到当前input的form，在从form标签获取validate对象。那只要我们修改为我们指定的容器标签即可。 修改代码如下： 1.增加一个获取容器的方法
getContainer: function (element) {
var container = $(element).closest('.validateContainer')[0];
container = container || element.form;
return container;
}2.替换所有使用element.form为$.validator.getContainer(element)
demo：
<div id="x" class="validateContainer">
<input data-rule-required="true" data-rule-number="true" data-rule-digits="true" acc="x" Acc2="xx" AcAc="3" acAc="4" name="xx" />
<input type="submit" value="submit" />
</div>
<script src="jquery-3.1.0.js"></script>
<script src="jquery.validate.js"></script>
<script>
$("#x").validate();
</script>当然，兼容性等尚未进行测试，经供参考 ps:话说markdown还是蛮好用的
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-09-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读