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

Question

I submit my form using jQuery $.post method and need to validation form using jQuery validation plugin like this :

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>');
            });

        });
    }
});

In action, jQuery validation not work with my form. how do fix this ?

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

Answer 1

You are binding the click handler on the button inside the submitHandler . This way, when a user clicks the button, the click event doesn't fire. You can simply remove the click handling lines from the 'submitHandler , so that the code inside is called directly whenever submitHandler` is triggered.