Question

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

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。为什么重新发明轮子。从您的服务器，如果使用PHP，echo "true"或"false"表示“通过”或“失败”验证。有关详细信息，请参阅"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验证

1 个答案: