修改 jquery.validate.js 支持非form標籤

嘗試使用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還是蠻好用的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章