[JQuery Validator]debug 纪录

好久没有碰JQuery

用了Validator发现很卡

纪录一下....

1.写好Validator后发现无法送出？
debug: true记得拿掉

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

Validator.resetForm（）不起作用？

取消的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>

遇到下拉选单会失效？

在Validate内加上ignore: ""即可。因为Select option如果是使用bootstrap或者是套件的话预设display为none
这个时候Validator就会忽略这个html tag
要怎么知道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();
    }
)};

目前就这些啰！如果还有别的再加上来．．

lblog_fy7jy96p

[JQuery Validator]debug 纪录