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

在使用

$.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>');
            }
          });
        });
      }
    }
  });
});

jQuery（文档）.ready（函数（$）{
$（“#myform”）。验证({
规则：{
姓名：{
要求：正确，
rangelength:[4,20]，
},
电邮：{
要求：正确，
电子邮件：是的，
},
信息：{
必填项：true
}
},
submitHandler:函数（表单）{
if（grecaptcha.getResponse（）=''）{
$（“#reCaptchaError'）.html（“Recaptcha Empty
”）；
}
否则{
$（'#reCaptchaError'）.hide（）；
$（“#ajax-1”）。单击（函数（e）{
e、 preventDefault（）；//避免在此处提交表单
$（“#ajax-form-msg1”）.html（“'/img/load.gif'/>”）；
var formData=$（“#ajaxform”）.serialize（）；
var URL=$（“#ajaxform”）.attr（“操作”）；
$.ajax({
url:url，
类型：“POST”，
数据：formData，
跨域：是的，
xhrFields：{
证书：正确
},
成功：函数（数据、文本状态、jqXHR）{
如果（数据=“是”）{
$（“#ajax-form-msg1”）.html（'
“+数据+”
');
$（“#表单内容”）.modal（'show'）；
$（“.contact form”）.slideUp（）；
}
否则{
$（“#ajax-form-msg1”）.html（“”+data+“”）；
}
},
错误：函数（jqXHR、textStatus、errorshown）{
$（“#ajax-form-msg1”）.html（'
AJAX请求失败
textStatus='+textStatus+'，errorhorn='+errorhorn+'

'）； } }); }); } } }); }); 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>

您正在序列化此上下文中不存在的Id

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

您应该使用以下选项：

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

另外，您可能应该使用
async:false
，并且应该记住
success:
在较新的版本中不推荐使用。请尝试改用.done（）

jQuery（文档）.ready（函数（$）{
$（“#myform”）。验证({
规则：{
姓名：{
要求：正确，
rangelength:[4,20]，
},
电邮：{
要求：正确，
电子邮件：是的，
},
信息：{
必填项：true
}
},
submitHandler:函数（表单）{
if（grecaptcha.getResponse（）=''）{
$（“#reCaptchaError'）.html（“Recaptcha Empty
”）；
}否则{
$（'#reCaptchaError'）.hide（）；
$（“#ajax-1”）。单击（函数（e）{
e、 preventDefault（）；//避免在此处提交表单
$（“#ajax-form-msg1”）.html（“'/img/load.gif'/>”）；
var formData=$（“#myform”）.serialize（）；
var URL=$（“#myform”）.attr（“操作”）；
$.ajax({
url:url，
类型：“POST”，
数据：formData，
跨域：是的，
xhrFields：{
证书：正确
},
异步：false
}).done（函数（数据、文本状态、jqXHR）{
如果（数据=“是”）{
$（“#ajax-form-msg1”）.html（“
”+data+”
”）；
$（“#表单内容”）.modal（'show'）；$（.contact-form”）.slideUp（）；
}否则{
$（“#ajax-form-msg1”）.html（“”+data+“”）；
}
}).fail（函数（jqXHR、textStatus、errorshown）{
$（“#ajax-form-msg1”）.html（'
ajax请求失败
textStatus='+textStatus+'，errorthround='+errorthround+'
）；
});
});
}
}
});
});

猜测一下，它的行为就像您的

grecaptcha.getResponse（）

返回空的一样，但是您没有提供足够的详细信息来轻松解决问题。您在浏览器控制台中看到了哪些错误？你看到了什么行为，有什么投入？为了简化，您遗漏了哪些难题（例如，代码中没有引用

grecaptcha

对象，这是什么）？

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 > ');
                    });
                });
            }
        }
    });
});