Jquery validation on modal form

Question

I have a problem with validating a field on a modal form. I created a cusom validation method called "Exists" and i use some more standard rules. It look like to me that "Validate" method does nothing because my form is valid in all cases... My "Validate" method is in part of code when modal is visible, so I don't know what is a problem.

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>

score 1 · Accepted Answer · edited May 23 '17 at 12:09

You have a few issues here...

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

The .validate() method does not belong inside a click handler for the form. The .validate() method is used for initializing the plugin on your form and only gets called once after the form is created, typically within a DOM ready handler. Once initialized, it automatically captures the click event of the submit button.
You have the jibdodaj object improperly placed. It belongs inside of the rules object, which you've failed to include.
The name of your field is JIB, so what is jibdodaj supposed to be? Inside the rules object, the fields can only be referenced by name.
Your custom Exists method could be replaced with 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" for more information.

$(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 validation on modal form

1 Answers1