title: Form validation using JQuery, Ajax, PHP, Json
body: <p>I am trying to verify values that users are typing in the field.</p>
  
  <p>And I ran across a problem regarding email field and email confirmation field.</p>
  
  <p>How I proceed;</p>
  
  <p>The user type in his email address, an <code>OnFocus</code> and <code>OnChange</code> event are triggered. But the browser tend to auto-fill the email confirmation field therefor triggering the <code>OnChange</code> event.</p>
  
  <p>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 <code>$_SESSION[$tmp_var]</code>. 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 <code>$_SESSION[$tmp_var]</code> which is not always set because the process is a bit longer.</p>
  
  <p>I know that the attribute <code>autofill="off"</code> is not an option.
  I use <code>$_SESSION[$tmp_var]</code> 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.</p>
  
  <p>I would like to keep the auto-fill of the form because it save user's time.</p>
  
  <p>Here is my JQuery that send json arrays to PHP;</p>
  
  <pre><code>$("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);
          }
      }); 
  });      
  </code></pre>
  
  <p>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</p>
  
  <p>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;</p>
  
  <p>Any suggestions?</p>