jQuery data-val-mandatory對於checkbox上的運用

jQuery對於網站開發者而言，已經是密不可分的好幫手。筆者要來介紹的小技巧。是對於input上的checkbox的觸發。相信對於表單上驗證技巧，有很多新手對於jQuery運用不是很了解，尤其是在checkbox上。


jquery.validate.unobtrusive.js和jquery.validate.min.js有些版上差異性，所以必須要加入下列的程式碼。
<script type="text/javascript">
(function ($) {
$.validator.unobtrusive.adapters.addBool("mandatory", "required");
} (jQuery));
</script>


CSS的套用上，使用下列的方式
<style type='text/css'>
p { margin-bottom: 10px; }
span { margin-left: 5px; margin-right: 20px; }
input[type='submit'] { width: 50px; }
p.field-validation-error ~ p.field-validation-error { display: none }
.field-validation-error {background: red;}
</style>


要讓checkbox觸發判斷是否被點選，只要在input標籤上加入這一段data-val-mandatory=""


<input type="checkbox" name="g1" data-val="true" data-val-mandatory="我被點選了" value="1"/><span>A1</span>


之後下面再透過任何的標籤加入下面的程式碼
<p class="field-validation-error" data-valmsg-for="g1" data-valmsg-replace="true"></p>

就可以有當沒有被點選時，出現警示的UI，如下圖：

圖示裡有2個必須點選的項目，上面的項目有被點選，所以不會出現警語。下方的因為沒被點選，所以就會在下面出現警語。這樣的設計表單，就可以透過上方的小技巧運用jQuery的方式去達到這樣的效果。

-雲遊山水為知已逍遙一生而忘齡- 電腦神手