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验证不适用于我的表单。怎么解决这个问题？

DEMO：http://jsfiddle.net/fcuswvf1/2/

Answer 1

您绑定了submitHandler内按钮上的点击处理程序。这样，当用户单击该按钮时，单击事件不会触发。您只需从触发的'submitHandler , so that the code inside is called directly whenever submitHandler`中删除点击处理行。

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

1 个答案: