From SJAX to AJAX

Question

I am looking to convert a part of my script in AJAX for it not to freeze the page as Synchronous JAX does. What I want to achieve is to verify if a password is ok before sending it to the server. If it's not, the password field will shake and display an error message.

 <script type="text/javascript">
    var ok = null;
    var lastChanged = "";
        $(document).ready(function() {
            $.localScroll({duration:800});
            <?php if ($wrong_pass): ?>
                $("form#password_box").velocity("callout.shake");
            <?php endif; ?>
            $("[name=pass]").on("keyup change propertychange", onPassChange);
        });
    </script>
    <script type="text/javascript">
        function onPassChange(e) {
            // get keycode of current keypress event
            var code = (e.keyCode || e.which);
            // do nothing if it's the enter key
            if(code != 13) {
                var init_val = $("#password_field").val();
                $.ajax({type: "POST", url:"check_password_AJAX", data:{pass:$("#password_field").val()}, dataType:"text", success: function (data) {
                    if (data && $("#password_field").val() == init_val) {
                        if (data == "TRUE") {
                            ok = true;
                            lastChanged = init_val;
                        }else {
                            ok = false;
                            lastChanged = init_val;
                        }
                    }
                }});
            }
        }
    </script>
    <script type="text/javascript">
        function validateForm() {
            if (ok && lastChanged == $("#password_field").val()) {
                $("#incorrect").velocity("transition.fadeOut");
                $("#incorrect").html("");
                return true;
            }else if (lastChanged != $("#password_field").val()) {
                //ajax
                var obj = $.ajax({type: "POST", url:"check_password_AJAX", data:{pass:$("#password_field").val()}, dataType:"text", async:false});
                // Analyse
                if (obj.responseText) {
                    if (obj.responseText == "TRUE") {
                        $("#incorrect").velocity("transition.fadeOut");
                        $("#incorrect").html("");
                        return true;
                    }else {
                        $("#password_container").velocity("callout.shake");
                        $("#incorrect").html("Mot de passe incorrect");
                        $("#incorrect").velocity("transition.fadeIn");
                        $("#password_field").val("");
                        return false;
                    }
                }
            }else {
                $("#password_container").velocity("callout.shake");
                $("#incorrect").html("Mot de passe incorrect");
                $("#incorrect").velocity("transition.fadeIn");
                $("#password_field").val("");
                return false;
            }
        }
</script>
<form action="cmd" method="post" class="center" id="password_box" onsubmit="return validateForm()">
                                    <div id="password_container">
                                        <input type="password" name="pass" id="password_field" placeholder="Mot de passe"><br>
                                    </div>
                                    <input type="submit" name="submit" class="button" value="S'autentifier">
                            </form>

For each keypresses, I go and try to validate the password using AJAX (onPassChange function) and put the result in the ok variable. If the user tries to submit the form before I validated it using AJAX, the only way around I found was using SJAX. Thanks.

Answer 1

I think you misunderstand AJAX usage. AJAX is used to perform an asynchronous HTTP (Ajax) request. Validating on the client side (I'm assuming you mean correct format and NOT correct password) should not be done using AJAX. Sending the user name and password to the back-end server can be done using AJAX since it is an HTTP request. If you are trying to check for the correct password when the user inputs text, I would be interested in knowing what use case that approach would be appropriate.

EDIT: I made quick and simple fiddle to demonstrate doing password format validation on the client. Notice the changes in the onPassChange function and the addition of an element in the html with id passwordInvalid. The notification only goes away if "format" is the password https://jsfiddle.net/032mn56t/19/

function onPassChange(e) {
    // get keycode of current keypress event
    var code = (e.keyCode || e.which);
    console.log(code);
    // do nothing if it's the enter key
     if(code != 13) {
         var init_val = $("#password_field").val();
        //substitute the following with matching input to a regex meething your password requirements. THis is just for demonstration. 
        if(init_val !== "format"){
            $("#passwordInvalid").show();
        }else{
            $("#passwordInvalid").hide();
        }
    }
<form action="cmd" method="post" class="center" id="password_box" onsubmit="return validateForm()">
    <div id="password_container">
       <input type="password" name="pass" id="password_field" placeholder="Mot de passe"><br>
    </div>
       <input type="submit" name="submit" class="button" value="S'autentifier">
</form>
<p id="passwordInvalid" style="display:none">
   WRONG PASSWORD FORMAT
</p>