jQuery驗證模式形式

Question

我在驗證模態表單上的字段時遇到問題。 我創建了一種稱為“ Exists”的常規驗證方法，並使用了一些更標准的規則。 在我看來，“驗證”方法什么都不做，因為我的表單在所有情況下都是有效的...當模態可見時，我的“驗證”方法是代碼的一部分，所以我不知道這是什么問題。

Here is my code:

JavaScript:

 <script type="text/javascript"> jQuery(document).ready(function ($) { $.validator.addMethod("Exists", function (value) { var isSuccess = false; $.ajax({ url: "/ControlerName/Method?JIB=" + $('#JIB').val(), data: {}, async: false, success: function (msg) { isSuccess = msg === "0" ? false : true } }); return isSuccess }, "Wrong JIB"); $('#btn-open-modal').on('click', function (e) { $("#dialog-1").modal('show'); }); $("#btn-ok").on('click', function (e) { e.preventDefault; var validator = $("#frm").validate({ JIB: { "required": true, "minlength": 13, "maxlength": 13, "digits": true, "Exists": true }, onkeyup: false, onclick: false, onfocusout: false }); if (!($("#frm-dodaj-na-zahtjev").valid())) { validator.focusInvalid(); console.log("0"); } else { console.log("1"); } }); }); </script> 

 Modal: <button type="button" class="btn ink-reaction btn-raised btn-primary" id="#btn-open-modal">Open</button> <div id="dialog-1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Enter ID</h3> </div> <form id="frm" class="form form-validation floating-label" role="form" action="#" method="post"> <div class="modal-body "> <br/> <div class="row"> <div class="form-group floating-label col-lg-6 col-lg-offset-3 "> <input type="text" id="JIB" class="form-control input-lg" name="JIB" /> <label for="JIB">JIB</label> </div> </div> <br/> </div> <div class="modal-footer"> <button id="btn-cancel" class="btn" data-dismiss="modal" aria-hidden="true">CANCEL</button> <button type="submit" id="btn-ok" class="btn btn-primary">OK</button> </div> </form> </div> </div> </div> 

Answer 1

您在這里遇到一些問題...

 $("#btn-ok").on('click', function (e) {
     e.preventDefault;
     var validator = $("#frm").validate({
         jibdodaj: {
             "required": true,
              "minlength": 13,
              "maxlength": 13,
              "digits": true,
              "Exists": true
         },
         onkeyup: false,
         onclick: false,
         onfocusout: false
         ....

1. .validate()方法不屬於表單的click處理程序。 .validate()方法用於初始化表單上的插件，並且僅在表單創建后（通常在DOM ready處理程序中）被調用一次。 初始化后，它將自動捕獲提交按鈕的click事件。

2. 您沒有正確放置jibdodaj對象。 它屬於rules對象的內部 ，您未能包括在內。

3. 您的字段name是JIB ，那么jibdodaj應該是什么？ 在rules對象內部，只能通過name引用字段。

4. 您的自定義Exists方法可以替換為內置的remote方法 。 為什么要重新發明輪子。 在服務器上，如果使用PHP，則echo "true"或"false"以表示“通過”或“失敗”驗證。 有關更多信息，請參見“ jQuery驗證遠程方法用法以檢查用戶名是否已存在” 。

---

$(document).ready(function() {

     var validator = $("#frm").validate({
         rules: {
             JIB: { // <- this is the NAME of the field
                 "required": true,
                  "minlength": 13,
                  "maxlength": 13,
                  "digits": true,
                  //"Exists": true // <- should replace with `remote`
                  remote: {
                      url: "/ControlerName/Method",
                      async: false,
                      type: "post" // default is GET
                  }
             }
         },
         messages: {
             JIB: {
                 remote: "Wrong JIB"
             }
         },
         onkeyup: false,
         onclick: false,
         onfocusout: false
         ....