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

jQuery validation submitHandler not work in $.ajax post form data

本文关键字：Ajax post 表单 数据 不起作用 验证 submitHandler jQuery      更新时间：2023-09-26

我使用$.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

submitHandler期待一个提交，你有一个点击事件在里面，然后一个ajax调用。

如果你在表单中有一个按钮type="submit"，你甚至不需要点击事件，插件会自动进行验证。所以只需在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
 }
});

在完成函数的末尾调用form.submit()。

见:http://jqueryvalidation.org/validate/

另外，您不需要$("#ajax-1").click()，因为无论如何，当您单击该按钮时，submitHandler将自动调用。您可以通过将console.log作为submitHandler的第一行来测试这一点。然后填好表格，按下按钮。查看它是否打印出您的日志消息。

在submitHandler中，您正在处理提交，那么为什么要写click event?

这里是修复。

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错误，当你提交。所以尝试在本地。

相关文章：