用 meteor 指令安裝 jQuery Validation(套件網址)
指令:
meteor add themeteorchef:jquery-validation
用法:
一樣參考套件網址,主要有兩種做法,一個是把驗證的設定寫在 input 的 attribute 裡面,像是 <input type="text" name="name" class="required"> ,但是一樣要用 js 去呼叫 validation 執行($("XXXX").validate())。
另一做法是把驗證的規則寫在 validate 的 options 裡面。像是:
基本上做法一,二都會在 onRender 的地方呼叫。
記得也要把 submit 那顆按鈕的預設行為取消 (submit preventDefault 那一段),不然也許邊驗證時也早就 redirect 到 action 出去的頁面了 XD。
樣式改寫 for Bootstrap:
因為 jQuery Validation 在驗證到錯誤或是未填的 input 時,會在 input 附近塞入 error message,但是預設的樣式並不符合 bootstrap 的樣式,像是:
為了讓錯誤的樣式符合 bootstrap 的樣子,要改寫一下 jQuery Validation 的 setDefault 的一些 method,像是 highlight, unhightlight...,但是因為整個網站下,有很多頁面只要有用到 jquery validation 的地方都必須要改寫驗證,為了節省一直複製貼上這一段到每一個頁面/template 的 onRender 去,所以我把這段改寫放到 Meteor.startup 的 function 去(我在根目錄下新增一個 startup.js 來擺這段 code):
改寫後,暫時符合預期:
其實在網路上有找到兩個解法,這個是我用起來比較順的,只是寫出來分享一下而已,也不知道好不好~自己斟酌摟 :P。
參考:
http://jsfiddle.net/m2o6c2vj/3/
http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin
指令:
meteor add themeteorchef:jquery-validation
用法:
一樣參考套件網址,主要有兩種做法,一個是把驗證的設定寫在 input 的 attribute 裡面,像是 <input type="text" name="name" class="required"> ,但是一樣要用 js 去呼叫 validation 執行($("XXXX").validate())。
另一做法是把驗證的規則寫在 validate 的 options 裡面。像是:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Template.yourTemplateName.events({ | |
'submit #some-form': ( event ) => event.preventDefault() | |
}); | |
Template.yourTemplateName.onRendered(function(){ | |
$('#some-form').validate({ | |
rules: { | |
datetime: { | |
required: true, | |
date: true | |
}, | |
email: { | |
required: true, | |
email: true | |
} | |
}, | |
messages: { | |
datetime: { | |
required: "請輸入日期", | |
date: "請輸入正確的日期格式" | |
}, | |
content: { | |
required: "請輸入電子信箱", | |
email: "email 格式不正確" | |
} | |
} | |
}); | |
}); |
基本上做法一,二都會在 onRender 的地方呼叫。
記得也要把 submit 那顆按鈕的預設行為取消 (submit preventDefault 那一段),不然也許邊驗證時也早就 redirect 到 action 出去的頁面了 XD。
樣式改寫 for Bootstrap:
因為 jQuery Validation 在驗證到錯誤或是未填的 input 時,會在 input 附近塞入 error message,但是預設的樣式並不符合 bootstrap 的樣式,像是:
為了讓錯誤的樣式符合 bootstrap 的樣子,要改寫一下 jQuery Validation 的 setDefault 的一些 method,像是 highlight, unhightlight...,但是因為整個網站下,有很多頁面只要有用到 jquery validation 的地方都必須要改寫驗證,為了節省一直複製貼上這一段到每一個頁面/template 的 onRender 去,所以我把這段改寫放到 Meteor.startup 的 function 去(我在根目錄下新增一個 startup.js 來擺這段 code):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 檔名叫做 startup.js | |
if (Meteor.isClient) { | |
Meteor.startup(function(){ | |
//參考自 http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin | |
$.validator.setDefaults({ | |
highlight: function(element) { | |
$(element).closest('.form-group').addClass('has-error'); | |
}, | |
unhighlight: function(element) { | |
$(element).closest('.form-group').removeClass('has-error'); | |
}, | |
errorElement: 'span', | |
errorClass: 'help-block', | |
errorPlacement: function(error, element) { | |
if(element.parent('.input-group').length) { | |
error.insertAfter(element.parent()); | |
} else { | |
error.insertAfter(element); | |
} | |
} | |
}); | |
}); | |
} |
其實在網路上有找到兩個解法,這個是我用起來比較順的,只是寫出來分享一下而已,也不知道好不好~自己斟酌摟 :P。
參考:
http://jsfiddle.net/m2o6c2vj/3/
http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin
如果是使用HTML5的話,我會直接加上
回覆刪除pattern="[正規式]"
如果是用JQ的話,我是直接把那個值傳入FUNCTION,然後再正規式檢查
而且在CHROME自己本身已可以設TYPE="DATE",他自己本身就會做CHECK(但不能設出現ERROR MSG)