Ajax post form - how to resubmit?

Question

So I have the following form, with an ajax, which to call the server for user authentication. Now the problem is that let's say the user password is wrong. If the user tries to correct it any subsequent call does no longer trigger the on('submit') function thus he is stuck at the page. How can I make it to allow resubmition of the form?

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

Answer... from discussion above.

Move the credential authentication ajax to the onchange event for both email and password and set a customvalidation message to "invalid username or password" or "" depending on ajax result.

Answer 2

Can you try adding a type submit attribute to your html button tag

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

Also you need not put a listener for submit you can use the .submit() function of jquery

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

The other way is you put a click handler on the button and internally call the .submit() for the form