Form validation using 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?

Firing an ajax request every time an input changes/loses focus isn't the greatest idea. You should consider validating these on the client-side and when the form is submitted do all server-side checks in the proper order. — SeinopSys
– SeinopSys, Commented Jan 17, 2016 at 21:33
In practice email confirmation field validation is usually done only on client side. Bindings to focus change will introduce many issues once in production environment because user behaviour is unpredictable. My suggestion would be create form with nice button, when user clicks button do some sanity validation on data and then post to server to check email existence in DB. — Kaspars Primaks
– Kaspars Primaks, Commented Jan 17, 2016 at 21:36
Actually, you should only care about the original email. I mean, that is the only one which should need to be checked on the backend. The confirmation one should only be checked against the original one. So, in JS, once the field is populated, you can check it against the original. If it is the same, then you have your first flag in true (email A === email B), then you need to know if the first one is a valid one, and that is what the backend will verify. Once it is verified, you will have your second flag set (email A is valid). If both booleans are true, then you should be able to continue. — Mindastic
– Mindastic, Commented Jan 17, 2016 at 22:01
Thank you guys this is a good idea since i already have all the server side ready for non java browser i will keep most of the javascript on client side cause after all that's why java is there! — MadeInDreams
– MadeInDreams, Commented Jan 18, 2016 at 2:26

sandyclone · Accepted Answer · 2016-01-17 22:38:48Z

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.

answered Jan 17, 2016 at 22:38

sandyclone

1494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MadeInDreams Over a year ago

Thank you this is a good idea i will use the hidden field to send the checked value to server. I'm dont need to worry about user skipping this validation by posting right to server since server side validation is already implemented.

Collectives™ on Stack Overflow

Form validation using JQuery, Ajax, PHP, Json

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related