Ajax 帖子表單 - 如何重新提交？

Question

所以我有以下表單，帶有一個ajax，用於調用服務器進行用戶身份驗證。 現在的問題是，假設用戶密碼錯誤。 如果用戶嘗試更正它，則任何后續調用都不再觸發on('submit')函數，因此他會卡在頁面上。 我怎樣才能讓它允許重新提交表格？

 var login_email = document.getElementById("login_email"); var login_password = document.getElementById("login_password"); $(function() { $('form#login_form').on('submit', function(e) { console.log("submit"); $.post('/auth_user', $(this).serialize(), function (data) { console.log(data); if(data == "No user registered with this email.") { login_email.setCustomValidity(data); } else if(data == "Incorrect password.") { login_password.setCustomValidity(data); } else { } }); e.preventDefault(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="/dashboard" id="login_form" method="post"> <div class="field-wrap"> <label> Email Address<span class="req">*</span> </label> <input type="email" name="email" id="login_email" required autocomplete="off"/> </div> <div class="field-wrap"> <label> Password<span class="req">*</span> </label> <input type="password" name="password" id="login_password" required autocomplete="off"/> </div> <p class="forgot"><a href="#">Forgot Password?</a></p> <button class="btn btn-primary"/>Log In</button> </form>

Answer 1

回答...來自上面的討論。

將憑據身份驗證 ajax 移動到電子郵件和密碼的 onchange 事件，並根據 ajax 結果將自定義驗證消息設置為“無效的用戶名或密碼”或“”。

Answer 2

您可以嘗試向 html 按鈕標記添加類型提交屬性嗎

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/dashboard" id="login_form" method="post">
                    <div class="field-wrap">
                        <label>
                            Email Address<span class="req">*</span>
                        </label>
                        <input type="email" name="email" id="login_email" required autocomplete="off"/>
                    </div>
                    <div class="field-wrap">
                        <label>
                            Password<span class="req">*</span>
                        </label>
                        <input type="password" name="password" id="login_password" required autocomplete="off"/>
                    </div>
                    <p class="forgot"><a href="#">Forgot Password?</a></p>
                    <button class="btn btn-primary" type="submit"/>Log In</button>
</form>

此外，您無需為提交設置偵聽器，您可以使用 jquery 的.submit()函數

$(function() {
    $('form#login_form').submit(function(e) {
        console.log("submit");
        $.post('/auth_user', $(this).serialize(), function (data) {
            console.log(data);
            if(data == "No user registered with this email.") {
                login_email.setCustomValidity(data);
            } else if(data == "Incorrect password.") {
                login_password.setCustomValidity(data);
            } else {

            }
        });
        e.preventDefault();
    });
});

另一種方法是在按鈕上放置一個單擊處理程序並在內部調用表單的 .submit()