Form validation using AJAX

[rizwan6feb]

Hi, everyone! I am learning AJAX these days. I want to validate a form with Ajax in such a way that every field is validated on the "onBlur" event. There are fields like Username, First Name, Last Name, Email, Password etc in the form. When the user changes focus from Username to any other field, Username is validated, and other fields are validated the same way.
How do i do this?
The technique that i have used only works if the user doesn't changes the focus too quickly, otherwise some fields show processing icon infinitly and only the last field gets validated.

[gits]

i guess you are using a global request-object and loose the reference when you start (in fact overwrite that reference) a new request from another field ... try to keep the references in an array or object ...

show how you use the request object in case you have problems to implement the suggestion ...

kind regards

[rizwan6feb]

The code for sending a validation request to check.php is given below

<script language="javascript">
    var ajaxRequest;  // The variable that makes Ajax possible!
    var f1;
<!-- 
//Browser Support Code
function getAjaxObject(){
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    return ajaxRequest;
}
 
function sendRequest(a,text){
        f1 = document.getElementById('chk'+a);
        f1.style.display='none';
        var e1=document.getElementById('checking'+a);
        e1.style.display='';
 
ajaxRequest=getAjaxObject();
ajaxRequest.open("GET", "check.php?cid="+text+"&c1="+a, true);
ajaxRequest.send(null);
 
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState==4){
 
        var f=document.form1;
        e1.style.display='none';
        f1.style.display='';
        f1.innerHTML = ajaxRequest.responseText;
 
    }
}
}
 

Where should i use object or Array?
I have used the variable "ajaxRequest" as array but it doesn't work

[gits]

let me give you a basic idea:

// global array for your requests
var requests = [];
 
function get_request_obj() {
    var req_obj = null;
 
    // typical code but use the private
    // var req_obj here and return that
    // at least
 
    return req_obj;
}
 
function send_request() {
    // now we fill the requests-array everytime with 
    // a new request
    requests[requests.length] = get_request_obj();
 
    // now use this reference from here: requests[requests.length]
    // this is the last initialized request and the ref is stored
}
 

additional to this you may want to delete the reference when a request is completed ...

kind regards