javascript - jQuery 验证插件在 ajax post 数据中不起作用

Question

在使用 $.ajax 方法发送数据之前，我需要使用 jQuery 验证插件进行验证。我有这个代码:

jQuery(document).ready(function ($) {
  $('#myform').validate({
    rules: {
      name: {
        required: true,
        rangelength: [4, 20],
      },
      email: {
        required: true,
        email: true,
      },
      message: {
        required: true
      }
    },
    submitHandler: function (form) {
      if (grecaptcha.getResponse() == '') {
        $('#reCaptchaError').html('<p>Recaptcha Empty</p>');
      }
      else {
        $('#reCaptchaError').hide();
        $("#ajax-1").click(function (e) {
          e.preventDefault(); // avoid submitting the form here
          $("#ajax-form-msg1").html("<img src='<?php echo RELATIVE_PATH. '/templates/'. TEMPLATENAME; ?>'/img/loading.gif'/>");
          var formData = $("#ajaxform").serialize();
          var URL = $("#ajaxform").attr("action");
          $.ajax({
            url: URL,
            type: "POST",
            data: formData,
            crossDomain: true,
            xhrFields: {
              withCredentials: true
            },
            success: 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 + '');
              }
            },
            error: function (jqXHR, textStatus, errorThrown) {
              $("#ajax-form-msg1").html('
<div class="alert alert-danger">
AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
            }
          });
        });
      }
    }
  });
});

HTML:

<div class="" id="ajax-msg1"></div>
<form id="myform" action="load.php">
<input type="hidden" name="csrf_token" id="my_token" value="<?php echo $token; ?>" />
<button type="submit" name="submit" id="ajax-1">Send</button>
</form>

但实际上我的表单不起作用并且不发送数据!如何解决这个问题？!

Answer 1

您正在序列化一个在此上下文中不存在的 ID

var formData = $("#ajaxform").serialize();

你应该使用这个:

var formData = $("#myform").serialize();

此外，您可能应该使用 async: false 并且应该记住 success: 在新版本中已被弃用。尝试使用 .done() 代替!

jQuery(document).ready(function($) {
    $('#myform').validate({
        rules: {
            name: {
                required: true,
                rangelength: [4, 20],
            },
            email: {
                required: true,
                email: true,
            },
            message: {
                required: true
            }
        },
        submitHandler: function(form) {
            if (grecaptcha.getResponse() == '') {
                $('#reCaptchaError').html('<p>Recaptcha Empty</p>');
            } else {
                $('#reCaptchaError').hide();
                $("#ajax-1").click(function(e) {
                    e.preventDefault(); // avoid submitting the form here
                    $("#ajax-form-msg1").html("<img src='<?php echo RELATIVE_PATH. '/templates/'. TEMPLATENAME; ?>'/img/loading.gif'/>");
                    var formData = $("#myform").serialize();
                    var URL = $("#myform").attr("action");
                    $.ajax({
                        url: URL,
                        type: "POST",
                        data: formData,
                        crossDomain: true,
                        xhrFields: {
                            withCredentials: 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 > ');
                    });
                });
            }
        }
    });
});