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

您將單擊處理程序綁定到submitHandler內的submitHandler 。 這樣，當用戶單擊按鈕時，不會觸發click事件。 您可以簡單地從'submitHandler'中刪除點擊處理行, so that the code inside is called directly whenever觸發SubmitHandler`時, so that the code inside is called directly whenever 。