甚麼都略懂 就是不懂

1. 寫好Validator 後發現無法送出？
debug: true 記得拿掉

$validator = $("#Form")
        .submit(function (e) {
            e.preventDefault();
        }).validate({
            debug: true,
            rules: {
               ...
            },
            messages: {
                ...
            },
       });
            

2. Validator.resetForm() not working?

取消的button type必須是button or reset

<form>
...

<input type="submit" id="btnSave" class="btn btn-outline-success" value="儲存">
<button type="button" id="btnCancel" class="btn btn-outline-dark">取消</button>
</form>

3. 遇到下拉選單會失效？

 在Validate內加上ignore: ""即可。 因為Select option 如果是使用bootstrap或者是套件的話 預設display為none
 這個時候Validator就會忽略這個html tag

4. 要怎麼知道AddMethod真的有被load進來？

可以在chrome的console畫面 輸入$.Validator.methods['addMethodName'] 就會列出你新增的Method內容喔！

5.怎麼將Validator error Message新增到你想要加的位置？

這個狀況很考驗你的JQuerySelector功力 因為每個人的html tag狀況不一樣,所以很難明確寫出來
這邊只列了幾個比較特殊的狀況

這邊將以這個HTML做範例

• 要將某一個input name = item1 錯誤訊息顯示在form-group之後

<form id="Form">
     <div data-role="body">
         <div class="row">
              <div class="form-group">
                   <label for="item2">item2：</label>
                   <input id="item2" name="item2" required placeholder="item2" />
              </div>
         </div>
         <div class="row">
              <div class="form-group">
                    <label for="item1">item1：</label>
                    <input id="item2" name="item1" class="form-control" required placeholder="item1" />
              </div>
         </div>
         <div data-role="footer" class="d-flex justify-content-center">
              <input type="submit" id="btnSave" class="btn btn-outline-success" value="儲存">
              <button type="button" id="btnCancel" class="btn btn-outline-dark">取消</button>
         </div>
     </div>
</form>

如果我想要將錯誤訊息加在form-group的後面

$('form').submit(function (e){
   e.preventDefault();
}).validator({
            ...,
            errorPlacement: function (error, element) {
                if (element.attr("name") == "item1") { //當tag name是item1時 顯示在.form-group結束之前
                    error.insertAfter($(element).closest('.form-group')); 
                } else {
                    error.insertAfter(element); 
                    //一般來說都是塞在control的正後方,但如果你的contorl是放在同一列的時候你就會破版
                }
            }
})

• 要將錯誤訊息顯示在某一個區塊內 這裡假設是form的正上方

<div id="error-message" class="alert alert-danger" role="alert"></div>
<form id="Form">
    <div data-role="body">
        ...
    </div>
</form>

$("#Form").submit(function (e) {
    e.preventDefault();
}).validate({
    rules: {
        ...
    },
    messages: {
        ...
    },
    errorPlacement: function (error, element) {
        $("#error-message").append(error); //簡單吧
        $("#error-message").show();
    }
)};

目前就這些囉！如果還有別的再加上來．．

-----------------------------------------

有時在會走之前你就得跑

你不解決問題 就等問題解決你