Pastebin launched a little side project called HostCabi.net, check it out ;-)Pastebin is 300% more awesome when you are logged in. Sign Up, it's FREE!
Guest

Untitled

By: a guest on Mar 27th, 2012  |  syntax: JavaScript  |  size: 3.75 KB  |  hits: 57  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // Load the getForm function while page is loading
  2. window.onload = getForm;
  3.  
  4. // Set this to your validation PHP script, default is "validate.php?value="
  5. var vUrl = "validate.php?value=";
  6.  
  7. // Set this to your form's id
  8. var formid = "vform";
  9.  
  10. // This is the array for error handling
  11. var vError =  [];
  12.  
  13. // We attach to every input field a little js
  14. function getForm() {
  15.  
  16.         // Important: Our form has to got the "vform" id
  17.         var form = document.getElementById(formid);
  18.  
  19.         if (document.getElementsByTagName) {
  20.                 var vInput = document.getElementsByTagName("input");
  21.                 for (var vCount=0; vCount<vInput.length; vCount++)
  22.                         vInput[vCount].onblur = function() { return validateIt(this); }
  23.         }
  24. }
  25.  
  26. // Refers to the function
  27. http = getHTTPObject();
  28.  
  29. function getHTTPObject() {
  30.  
  31.   var xmlhttp;
  32.  
  33.   /*@cc_on
  34.  
  35.   @if (@_jscript_version >= 5)
  36.     try {
  37.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  38.     }catch(e){
  39.       try{
  40.       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  41.     }catch(E){
  42.       xmlhttp = false;
  43.     }
  44.   }
  45.   @else
  46.     xmlhttp = false;
  47.   @end @*/
  48.  
  49.   if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
  50.     try {
  51.       xmlhttp = new XMLHttpRequest();
  52.     }catch(e){
  53.       xmlhttp = false;
  54.     }
  55.   }
  56.  
  57.   return xmlhttp;
  58.  
  59. }
  60.  
  61. // The main validation-function
  62. function validateIt(vInput) {
  63.  
  64.         // Each input field's id
  65.         vId = vInput.id;
  66.         vValue = vInput.value;
  67.  
  68.         // Separate the class attr of each input field
  69.         getValue = vInput.className;
  70.         if(getValue.indexOf(",") == -1 ) {
  71.                 vType = getValue;
  72.                 vRequired = "";
  73.         } else {
  74.                 vRules = vInput.className.split(",");
  75.                 vRequired = vRules[0];
  76.                 vType = vRules[1];
  77.         }
  78.  
  79.         // The whole URL
  80.         var url = vUrl + (vValue) + "&required=" + (vRequired) + "&type=" + (vType);
  81.  
  82.         // And finally we send it to the url we specified
  83.         http.open("GET", url, true);
  84.  
  85.         // The handleHttpResponse is the function we call, when we have an
  86.         // answer back from the PHP script
  87.         http.onreadystatechange = handleHttpResponse;
  88.         http.send(null);
  89.  
  90. }
  91.  
  92. // A function to handle the response from the PHP script
  93. function handleHttpResponse() {
  94.  
  95.         if(http.readyState == 4) {
  96.  
  97.                 // Refering to the PHP script, for every validation we'll get
  98.                 // either true or false and apply some visual changes in order to
  99.                 // get the user focusing on each field whether it's ok or not
  100.                 // If one of the input fields contains an error, the submit button
  101.                 // will be disabled, until the error (that means all errors) are
  102.                 // solved
  103.                 if(http.responseText == "false") {
  104.  
  105.                         var sInput = document.getElementById(vId);
  106.                         var vButton = document.getElementById("submit");
  107.  
  108.                         document[vId].src = "img/false.png";
  109.                         sInput.style.border = "1px solid #d12f19";
  110.                         sInput.style.background = "#f7cbc2";
  111.                         vButton.disabled = true;
  112.                         vError.push(vId);
  113.  
  114.                 }
  115.  
  116.                 if(http.responseText == "true") {
  117.  
  118.                         var sInput = document.getElementById(vId);
  119.  
  120.                         document[vId].src = "img/true.png";
  121.                         sInput.style.border = "1px solid #338800";
  122.                         sInput.style.background = "#c7f7be";
  123.  
  124.                         // We do a check if our element is in the error array, and if
  125.                         // so, we can delete it from the array
  126.                         if(vError.indexOf(vId) != -1) {
  127.                                 var aId = vError.indexOf(vId);
  128.                                 vError.splice(aId, 1);
  129.                                 if(vError.length > 0) {
  130.                                         var vButton = document.getElementById("submit");
  131.                                         vButton.disabled = true;
  132.                                 } else {
  133.                                         var vButton = document.getElementById("submit");
  134.                                         vButton.disabled = false;
  135.                                 }
  136.                         }
  137.                 }
  138.  
  139.                 if(http.responseText == "none") {
  140.  
  141.                         var sInput = document.getElementById(vId);
  142.                         var vButton = document.getElementById("submit");
  143.  
  144.                         document[vId].src = "img/blank.gif";
  145.                         sInput.style.border = "1px solid #aaa";
  146.                         sInput.style.background = "#ffffff";
  147.                         vButton.disabled = false;
  148.  
  149.                 }
  150.  
  151.         }
  152. }