Advertisement
konyakov

Simple AJAX form validation

Feb 26th, 2012
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2. Ajax form validation
  3. Created by Konyakov Artem
  4. http://konyakov.ru/contacts/
  5. 19.12.2006
  6. **/
  7.  
  8. var formValidationMasks = new Array();
  9. formValidationMasks['orderBook'] = /^[0-9]{1,4}$/gi;
  10. formValidationMasks['orderBookDvd'] = /^[0-9]{1,4}$/gi;
  11. // formValidationMasks['email'] = /\b[A-Z0-9._-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b/gi;
  12. var formElementArray = new Array();
  13.  
  14. function addEvent(obj, type, fn) {
  15.     if (obj.attachEvent) {
  16.         obj['e' + type + fn] = fn;
  17.         obj[type + fn] = function () {
  18.             obj['e' + type + fn](window.event);
  19.         }
  20.         obj.attachEvent('on' + type, obj[type + fn]);
  21.     } else obj.addEventListener(type, fn, false);
  22. }
  23.  
  24. function removeEvent(obj, type, fn) {
  25.     if (obj.detachEvent) {
  26.         obj.detachEvent('on' + type, obj[type + fn]);
  27.         obj[type + fn] = null;
  28.     } else obj.removeEventListener(type, fn, false);
  29. }
  30.  
  31.  
  32. function validateInput(e, inputObj) {
  33.     if (!inputObj) inputObj = this;
  34.     var inputValidates = true;
  35.  
  36.     if (formElementArray[inputObj.name]['required'] && inputObj.tagName == 'INPUT' && inputObj.value.length == 0) inputValidates = false;
  37.     if (formElementArray[inputObj.name]['required'] && inputObj.tagName == 'SELECT' && inputObj.selectedIndex == 0) {
  38.         inputValidates = false;
  39.     }
  40.     if (formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']])) inputValidates = false;
  41.  
  42.     if (formElementArray[inputObj.name]['freemask']) {
  43.         var tmpMask = formElementArray[inputObj.name]['freemask'];
  44.         tmpMask = tmpMask.replace(/-/g, '\\-');
  45.         tmpMask = tmpMask.replace(/S/g, '[A-Z]');
  46.         tmpMask = tmpMask.replace(/N/g, '[0-9]');
  47.         tmpMask = eval("/^" + tmpMask + "$/gi");
  48.         if (!inputObj.value.match(tmpMask)) inputValidates = false
  49.     }
  50.  
  51.     if (formElementArray[inputObj.name]['regexpPattern']) {
  52.         var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);
  53.         if (!inputObj.value.match(tmpMask)) inputValidates = false
  54.     }
  55.     if (!formElementArray[inputObj.name]['required'] && inputObj.value.length == 0 && inputObj.tagName == 'INPUT') inputValidates = true;
  56.  
  57.     if (inputValidates) {
  58.         inputObj.parentNode.className = 'validInput';
  59.     } else {
  60.         inputObj.parentNode.className = 'invalidInput'
  61.     }
  62. }
  63.  
  64. function isFormValid() {
  65.     var divs = document.getElementsByTagName('DIV');
  66.     for (var no = 0; no < divs.length; no++) {
  67.         if (divs[no].className == 'invalidInput') return false;
  68.     }
  69.     return true;
  70. }
  71.  
  72.  
  73. function initFormValidation() {
  74.     var inputFields = document.getElementsByTagName('INPUT');
  75.     var selectBoxes = document.getElementsByTagName('SELECT');
  76.  
  77.     var inputs = new Array();
  78.  
  79.  
  80.     for (var no = 0; no < inputFields.length; no++) {
  81.         inputs[inputs.length] = inputFields[no];
  82.  
  83.     }
  84.     for (var no = 0; no < selectBoxes.length; no++) {
  85.         inputs[inputs.length] = selectBoxes[no];
  86.  
  87.     }
  88.  
  89.     for (var no = 0; no < inputs.length; no++) {
  90.         var required = inputs[no].getAttribute('required');
  91.         if (!required) required = inputs[no].required;
  92.  
  93.         var mask = inputs[no].getAttribute('mask');
  94.         if (!mask) mask = inputs[no].mask;
  95.  
  96.         var freemask = inputs[no].getAttribute('freemask');
  97.         if (!freemask) freemask = inputs[no].freemask;
  98.  
  99.         var regexpPattern = inputs[no].getAttribute('regexpPattern');
  100.         if (!regexpPattern) regexpPattern = inputs[no].regexpPattern;
  101.  
  102.         var div = document.createElement('DIV');
  103.         div.className = 'invalidInput';
  104.         inputs[no].parentNode.insertBefore(div, inputs[no]);
  105.         div.appendChild(inputs[no]);
  106.         div.style.width = inputs[no].offsetWidth + 'px';
  107.  
  108.         addEvent(inputs[no], 'blur', validateInput);
  109.         addEvent(inputs[no], 'change', validateInput);
  110.         addEvent(inputs[no], 'paste', validateInput);
  111.         addEvent(inputs[no], 'keyup', validateInput);
  112.  
  113.         formElementArray[inputs[no].name] = new Array();
  114.         formElementArray[inputs[no].name]['mask'] = mask;
  115.         formElementArray[inputs[no].name]['freemask'] = freemask;
  116.         formElementArray[inputs[no].name]['required'] = required;
  117.         formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;
  118.  
  119.         validateInput(false, inputs[no]);
  120.  
  121.     }
  122. }
  123. window.onload = initFormValidation;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement