Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Load the getForm function while page is loading
- window.onload = getForm;
- // Set this to your validation PHP script, default is "validate.php?value="
- var vUrl = "validate.php?value=";
- // Set this to your form's id
- var formid = "vform";
- // This is the array for error handling
- var vError = [];
- // We attach to every input field a little js
- function getForm() {
- // Important: Our form has to got the "vform" id
- var form = document.getElementById(formid);
- if (document.getElementsByTagName) {
- var vInput = document.getElementsByTagName("input");
- for (var vCount=0; vCount<vInput.length; vCount++)
- vInput[vCount].onblur = function() { return validateIt(this); }
- }
- }
- // Refers to the function
- http = getHTTPObject();
- function getHTTPObject() {
- var xmlhttp;
- /*@cc_on
- @if (@_jscript_version >= 5)
- try {
- xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
- }catch(e){
- try{
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }catch(E){
- xmlhttp = false;
- }
- }
- @else
- xmlhttp = false;
- @end @*/
- if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
- try {
- xmlhttp = new XMLHttpRequest();
- }catch(e){
- xmlhttp = false;
- }
- }
- return xmlhttp;
- }
- // The main validation-function
- function validateIt(vInput) {
- // Each input field's id
- vId = vInput.id;
- vValue = vInput.value;
- // Separate the class attr of each input field
- getValue = vInput.className;
- if(getValue.indexOf(",") == -1 ) {
- vType = getValue;
- vRequired = "";
- } else {
- vRules = vInput.className.split(",");
- vRequired = vRules[0];
- vType = vRules[1];
- }
- // The whole URL
- var url = vUrl + (vValue) + "&required=" + (vRequired) + "&type=" + (vType);
- // And finally we send it to the url we specified
- http.open("GET", url, true);
- // The handleHttpResponse is the function we call, when we have an
- // answer back from the PHP script
- http.onreadystatechange = handleHttpResponse;
- http.send(null);
- }
- // A function to handle the response from the PHP script
- function handleHttpResponse() {
- if(http.readyState == 4) {
- // Refering to the PHP script, for every validation we'll get
- // either true or false and apply some visual changes in order to
- // get the user focusing on each field whether it's ok or not
- // If one of the input fields contains an error, the submit button
- // will be disabled, until the error (that means all errors) are
- // solved
- if(http.responseText == "false") {
- var sInput = document.getElementById(vId);
- var vButton = document.getElementById("submit");
- document[vId].src = "img/false.png";
- sInput.style.border = "1px solid #d12f19";
- sInput.style.background = "#f7cbc2";
- vButton.disabled = true;
- vError.push(vId);
- }
- if(http.responseText == "true") {
- var sInput = document.getElementById(vId);
- document[vId].src = "img/true.png";
- sInput.style.border = "1px solid #338800";
- sInput.style.background = "#c7f7be";
- // We do a check if our element is in the error array, and if
- // so, we can delete it from the array
- if(vError.indexOf(vId) != -1) {
- var aId = vError.indexOf(vId);
- vError.splice(aId, 1);
- if(vError.length > 0) {
- var vButton = document.getElementById("submit");
- vButton.disabled = true;
- } else {
- var vButton = document.getElementById("submit");
- vButton.disabled = false;
- }
- }
- }
- if(http.responseText == "none") {
- var sInput = document.getElementById(vId);
- var vButton = document.getElementById("submit");
- document[vId].src = "img/blank.gif";
- sInput.style.border = "1px solid #aaa";
- sInput.style.background = "#ffffff";
- vButton.disabled = false;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement