Question

我使用$.ajax发送数据并使用jQuery验证插件进行验证，如下所示：

<div class="" id="ajax-form-msg1"></div>
<form id="myform" action="load.php">
    <input type="input" name="name" id="name" value="" />
    <input type="hidden" name="csrf_token" id="my_token" value="MkO89FgtRF^&5fg#547@d6fghBgf5" />
    <button type="submit" name="submit" id="ajax-1">Send</button>
</form>

JS：

jQuery(document).ready(function ($) {
    $('#myform').validate({
        rules: {
            name: {
                required: true,
                rangelength: [4, 20],
            },
        },
        submitHandler: function (form) {

            $("#ajax-1").click(function (e) {
                e.preventDefault(); // avoid submitting the form here
                $("#ajax-form-msg1").html("<img src='http://www.drogbaster.it/loading/loading25.gif'>");
                var formData = $("#myform").serialize();
                var URL = $("#myform").attr("action");
                $.ajax({
                    url: URL,
                    type: "POST",
                    data: formData,
                    crossDomain: true,
                    async: false
                }).done(function (data, textStatus, jqXHR) {
                    if (data == "yes") {
                        $("#ajax-form-msg1").html(' < div class = "alert alert-success" > ' + data + ' < /div>');
                        $("#form-content").modal('show');
                        $(".contact-form").slideUp();
                    } else {
                        $("#ajax-form-msg1").html('' + data + '');
                    }
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    $("#ajax-form-msg1").html(' < div class = "alert alert-danger" >AJAX Request Failed < br / > textStatus = ' + textStatus + ', errorThrown = ' + errorThrown + ' < /code></pre > ');
                });
            });

        }
    });
});

在操作中，我的表单使用jQuery验证进行验证，但在验证后不提交并且不发送数据。

如何解决这个问题？！

DEMO HERE

Answer 1

submitHandler期待提交，你在其中有一个click事件，然后是一个ajax调用。

如果你有一个按钮类型=＆＃34;提交＆＃34;在您甚至不需要点击事件的表单中，插件会自动进行验证。所以只需在submitHandler中进行ajax调用。

如果您需要使用click事件将操作绑定到按钮，那么正确的方法应该是这样的：

$('#button').click(function(){
 var form = $('#myform').validate({...}); #store the validator obj
 if (form.is_valid()){
  // submit using ajax
 } else {
  // dont do anything
 }
});

Answer 2

在submitHandler您正在处理提交，那么为什么还要编写Click事件？

这是修复。

jQuery(document).ready(function($) {
  $('#myform').validate({
    rules: {
      name: {
        required: true,
        rangelength: [2, 20],
      },
    },
    submitHandler: function(a, e) {
      //a is form object and e is event
      e.preventDefault(); // avoid submitting the form here
      $("#ajax-form-msg1").html("<img src='http://www.drogbaster.it/loading/loading25.gif'>");
      var formData = $("#myform").serialize();
      var URL = $("#myform").attr("action");
      $.ajax({
        url: URL,
        type: "POST",
        data: formData,
        crossDomain: true,
        async: false,
        success: function(data) {
          console.log(data)
        },
        error: function(err) {
          console.log(err)
        }
      }).done(function(data, textStatus, jqXHR) {
        if (data == "yes") {
          $("#ajax-form-msg1").html(' < div class = "alert alert-success" > ' + data + ' < /div>');
          $("#form-content").modal('show');
          $(".contact-form").slideUp();
        } else {
          $("#ajax-form-msg1").html('' + data + '');
        }
      }).fail(function(jqXHR, textStatus, errorThrown) {
        $("#ajax-form-msg1").html(' < div class = "alert alert-danger" >AJAX Request Failed < br / > textStatus = ' + textStatus + ', errorThrown = ' + errorThrown + ' < /code></pre > ');
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>

<form id="myform" action="load.php">
  <input type="input" name="name" id="name" value="" />
  <input type="hidden" name="csrf_token" id="my_token" value="MkO89FgtRF^&5fg#547@d6fghBgf5" />
  <button type="submit" name="submit" id="ajax-1">Send</button>
</form>

使用success和error回拨来获取数据或错误消息。

注意：此处（在StackOverflow中）提交时会出现404 Page Not Found错误。所以在你当地尝试。

jQuery验证submitHandler在$ .ajax post表单数据中不起作用

2 个答案: