javascript - jQuery 验证在 Ajax 表单提交中不起作用

Question

我使用 jQuery $.post 方法提交表单，并且需要使用 jQuery 验证插件验证表单，如下所示:

HTML:

<form name="myform" id="myform" action="send.php">User:
    <input type="text" value="" name="user" />
    <br/>Password:
    <input type="password" name="password" value="" />
    <input type="hidden" name="xyz" value="123" />
    <input type="hidden" name="submit" value="true" />
    <?php $token=N oCSRF::generate( 'csrf_token' );?>
    <input type="hidden" name="csrf_token" value="<?php echo $token; ?>">
</form>
<button class="btn btn-info" id="ajax-form-1">Run Code</button>
<div id="ajax-form-msg1"></div>

JS:

$('#myform').validate({

    rules: {
        user: {
            required: true
        },
        password: {
            required: true
        }
    },

    submitHandler: function (form) {
        $("#ajax-form-1").click(function () {
            $("#ajax-form-msg1").html("<img src='loading.gif'/>");

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

            var URL = $("#myform").attr('action');
            $.post(URL,
            formData,

            function (data, textStatus, jqXHR) {
                $("#ajax-form-msg1").html('<pre><code class="prettyprint">' + data + '</code></pre>');

            }).fail(function (jqXHR, textStatus, errorThrown) {
                $("#ajax-form-msg1").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
            });

        });
    }
});

实际上，jQuery 验证不适用于我的表单。如何解决这个问题？

演示:http://jsfiddle.net/fcuswvf1/2/

Answer 1

您正在将点击处理程序绑定(bind)到 submitHandler 内的按钮上。这样，当用户单击按钮时，不会触发单击事件。您可以简单地从“submitHandler”中删除点击处理行，以便在触发submitHandler`时直接调用其中的代码。