为什么jquery表单没有在第一次点击时提交

Question

I have one popup modal which submit to an ajax page after validation. Validation and submission are working perfectly. But the only issue, on first click it is not submitting the form or validation.On the second click it is working perfect.

Code:

<script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $('#gen-bar-form').validate({
                ignore: [],
                rules: { 
                        firstName: {
                            required: true
                        },
                        editor: {

                            required: true
                        }
                },

          submitHandler: function(form) {

             $("#loader-bg").css("visibility", "visible");

          $.ajax({
            type: 'post',
            url: 'action/file.php',
            data: $('form').serialize(),
            success: function (data) {
            var GenTokRet = JSON.parse(data);
            $("#gen-msg").html("<p>"+GenTokRet+"<p>");
            $("#loader-bg").css("visibility", "hidden");  

            }
          });

          }

          }); 

        });

      });
    </script>

Answer 1

You did wrong, because, you are using prevent default function for stopping the form , though jQuery validate will auto stop submitting form till it is valid. so just type validate function on submit function not needed