使用JQuery，Ajax，PHP，Json进行表单验证

Question

I am trying to verify values that users are typing in the field.

And I ran across a problem regarding email field and email confirmation field.

How I proceed;

The user type in his email address, an OnFocus and OnChange event are triggered. But the browser tend to auto-fill the email confirmation field therefor triggering the OnChange event.

So what happen is that the email typed in the first field get sent to the server to validate it and check if its already in the database. If this email pass all the test I store it in a temporary $_SESSION[$tmp_var] . However, the email confirmation field get triggered in the same time due to auto-fill and sometime get to the server to be compared with $_SESSION[$tmp_var] which is not always set because the process is a bit longer.

I know that the attribute autofill="off" is not an option. I use $_SESSION[$tmp_var] because non-Javascript users get to reload the page if there is an error and the field are filled with this so they don't have to retype their values.

I would like to keep the auto-fill of the form because it save user's time.

Here is my JQuery that send json arrays to PHP;

$("body").on("focusout change", "input, select", function () {
    var id = ($(this).attr("id"));
    var container = ['#' + id + "_ck", '#' + id + '_err'];
    var data_type = ($(this).attr("data-type"));
    var text = document.getElementById(id).value;
    $.ajax({
        url: 'ajax-php.php',
        type: 'post',
        dataType: 'json',
        data: { 'action': 'input_ck', 'id': id, 'text': text, 'data_type': data_type },
        success: function (data, status) {
                if (data[2] == 'true') {
                     $(container[1]).addClass("err_f");
                     $(container[1]).html(data[1]);
                     $(container[0]).html(data[0]);
                      }
                if (data[2] == 'false') { 
                     $(container[1]).addClass("pass_f"); 
                     $(container[1]).html('Valeur acceptée.');
                     $(container[0]).html(data[0]);
                }
        },
        error: function (xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    }); 
});      

The first thing that comes to my mind would be to intercept the field id of email confirmation and compare it with the email field value

Or somehow wait for one query to end with success before performing another query so both email and email confirmation field would not be sent at the same time;

Any suggestions?

Answer 1

If you want to stick with your existing code, some little changes will fix your issue. Add an additional input field with empty field value and fill it with some session variable output in the success function of ajax request.

check for the value of the input field in the success function, until you get a value, loop it using setTimeout, in this way you can make the ajax request wait till the processing on the php script is done.