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

jQuery validation not work in Ajax Form Submit

本文关键字：不起作用 表单提交 Ajax 验证 jQuery      更新时间：2023-09-26

我使用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/

您正在将单击处理程序绑定到submitHandler内部的按钮上。这样，当用户单击按钮时，click事件不会触发。你可以简单地删除点击处理行从'submitHandler , so that the code inside is called directly whenever submitHandler '被触发。

相关文章：