javascript - 必须单击“提交”两次才能在表单提交时触发 AJAX 请求

Question

我的表单 HTML 如下所示。

<form novalidate action="register.php" method="post" >
    <label for="username">Username</label>
    <input type="text" name="username" required placeholder="Your username" autofocus/>

    <input type="submit" name="register" value="Register" cid="submit" />
</form>

我的 jQuery 看起来像这样

$("form").submit(function(e) {
    var $form = $(this);
    var serializedData = $form.serialize();    
    request = $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON"
    });
    request.done(function(response, textStatus, jqXHR) {
        console.log("HELLO");
        $('form').unbind(); 
        $('form').submit();
    });
    e.preventDefault();
});

可悲的是，它会将 hello 记录到控制台，但它永远不会通过单击提交按钮来提交表单。我需要按两次才能提交按钮。

谁能告诉我这个问题以及如何解决它，以便 1 次点击就足以提交表单。

注意:发送表单数据是为了验证，而不是为了提交。如果电子邮件、用户名等数据有效，我希望一键提交表单。

Answer 1

尝试将验证与表单提交分开。

只需更改此行:

$("form").submit(function(e) {

至

$("input[name='register']").click(function(e) {