javascript - jQuery 验证submitHandler 不适用于$.ajax 发布表单数据

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 验证进行验证，但验证后不提交也不发送数据。

如何解决这个问题？!

演示 HERE

Answer 1

submitHandler 正在等待提交，并且其中有一个单击事件，然后是一个 ajax 调用。

如果表单中有一个按钮 type="submit"，您甚至不需要单击事件，插件将自动进行验证。因此只需在submitHandler 中进行ajax 调用即可。

如果您需要使用点击事件将操作绑定(bind)到按钮，正确的方法应该是这样的:

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