By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,459 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

Form validation using AJAX

rizwan6feb
100+
P: 108
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.
Jun 2 '08 #1
Share this Question
Share on Google+
3 Replies


gits
Expert Mod 5K+
P: 5,390
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
Jun 2 '08 #2

rizwan6feb
100+
P: 108
The code for sending a validation request to check.php is given below
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.     var ajaxRequest;  // The variable that makes Ajax possible!
  3.     var f1;
  4. <!-- 
  5. //Browser Support Code
  6. function getAjaxObject(){
  7.     try{
  8.         // Opera 8.0+, Firefox, Safari
  9.         ajaxRequest = new XMLHttpRequest();
  10.     } catch (e){
  11.         // Internet Explorer Browsers
  12.         try{
  13.             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  14.         } catch (e) {
  15.             try{
  16.                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  17.             } catch (e){
  18.                 // Something went wrong
  19.                 alert("Your browser broke!");
  20.                 return false;
  21.             }
  22.         }
  23.     }
  24.     return ajaxRequest;
  25. }
  26.  
  27. function sendRequest(a,text){
  28.         f1 = document.getElementById('chk'+a);
  29.         f1.style.display='none';
  30.         var e1=document.getElementById('checking'+a);
  31.         e1.style.display='';
  32.  
  33. ajaxRequest=getAjaxObject();
  34. ajaxRequest.open("GET", "check.php?cid="+text+"&c1="+a, true);
  35. ajaxRequest.send(null);
  36.  
  37. ajaxRequest.onreadystatechange = function(){
  38.     if(ajaxRequest.readyState==4){
  39.  
  40.         var f=document.form1;
  41.         e1.style.display='none';
  42.         f1.style.display='';
  43.         f1.innerHTML = ajaxRequest.responseText;
  44.  
  45.     }
  46. }
  47. }
  48.  
Where should i use object or Array?
I have used the variable "ajaxRequest" as array but it doesn't work
Jun 2 '08 #3

gits
Expert Mod 5K+
P: 5,390
let me give you a basic idea:

Expand|Select|Wrap|Line Numbers
  1. // global array for your requests
  2. var requests = [];
  3.  
  4. function get_request_obj() {
  5.     var req_obj = null;
  6.  
  7.     // typical code but use the private
  8.     // var req_obj here and return that
  9.     // at least
  10.  
  11.     return req_obj;
  12. }
  13.  
  14. function send_request() {
  15.     // now we fill the requests-array everytime with 
  16.     // a new request
  17.     requests[requests.length] = get_request_obj();
  18.  
  19.     // now use this reference from here: requests[requests.length]
  20.     // this is the last initialized request and the ref is stored
  21. }
  22.  
additional to this you may want to delete the reference when a request is completed ...

kind regards
Jun 2 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.