Jquery 模态表单验证

Question

我在验证模态表单上的字段时遇到问题。我创建了一个名为 "Exists" 的自定义验证方法，并使用了一些更标准的规则。在我看来 "Validate" 方法什么都不做，因为我的表格在所有情况下都有效...... 当模态可见时，我的 "Validate" 方法是代码的一部分，所以我不知道有什么问题。

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
         ....

.validate() 方法不属于表单的 click 处理程序。 .validate() 方法用于 初始化 表单上的插件，并且仅在创建表单后调用一次，通常在DOM 准备就绪的处理程序。初始化后，它自动捕获提交按钮的click事件。
您的 jibdodaj 对象放置不当。它属于 rules 对象的内部，您没有包含它。
你的领域name是JIB，那么jibdodaj应该是什么？ rules对象内部，字段只能被name.
您的自定义 Exists 方法可以替换为 the built-in remote method. Why reinvent the wheel. From your server, if using PHP, echo a "true" or "false" to indicate "pass" or "fail" validation. See "jQuery Validate remote method usage to check if username already exists" 以获得更多信息。

$(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
         ....

Jquery 模态表单验证

Jquery validation on modal form

javascript

jquery

jquery-validate

bootstrap-modal