JSFiddle - React, Tailwind, and code Playground

HTML

<form id="login" action="" method="post">
    <label for="txtEmail">Email Address</label>
    <input type="text" name="email" id="txtEmail">
    <label for="txtPwd">Password</label>
    <input type="password" name="password" id="txtPwd">
    <input type="submit" value="Login">
</form>

CSS

#msgErrors {
    display: none;
    background: red;
    color:white;
    text-align:center;
}

JavaScript

function simulateAjax(email, pwd) {
    /**
     $.ajax({
         url: 'your_ajax_page.php',
         type: 'post',
         dataType: 'json',
         data: {
             email: email,
             password: pwd
         }, success: function(response) {
             // Do something with the server response here if you want
         }
         
     })
     */
    alert('Logged email/password');
}

$(function () {
    var counter = 0;

    $('#login').submit(function (e) {
        var email, pwd;
        var NUM_FORCED_FAILS = 3;
        email = $('#txtEmail').val();
        pwd = $('#txtPwd').val();
        counter += 1;

        if (counter <= NUM_FORCED_FAILS) {
            e.preventDefault(); // Prevent the form from actually submitting
            simulateAjax(email, pwd);
            return;
        }
        // Allow the form to submit normally
        alert("Submiting for real");
        // You'll see some validation bullshit from jsfiddle, but
        // you get the idea.
        return true;
    });
});