Question

所以我有以下形式，带有ajax，用于调用服务器进行用户身份验证。现在的问题是，让我们说用户密码是错误的。如果用户尝试更正它，则任何后续调用都不再触发on('submit')功能，因此他卡在页面上。我怎样才能让它重新提供表格？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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（）

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

2 个答案: