home *** CD-ROM | disk | FTP | other *** search
/ Chip 2003 November / Chip_2003-11_cd1.bin / chplus / chlapark / check_form.js < prev    next >
Encoding:
JavaScript  |  2003-09-29  |  7.4 KB  |  244 lines
  1. /*
  2.  
  3. checkForm by Riki "Fczbkk" Fridrich, 2002
  4. ver 2.0
  5.  
  6. http://www.fczbkk.sk/
  7. mailto:acid@pobox.sk
  8.  
  9. You should find latest version of this script and documentation at
  10. http://www.fczbkk.sk/js/check_form/
  11.  
  12. */
  13.  
  14. /*
  15. This is second version of my script for automatic checking of forms. It should
  16. work in in all standards-compliant browsers (Mozilla, Internet Explorer 5+), it
  17. downgrades OK in older browsers. No, it's not working in Opera (I said it works
  18. in standards-compliant browsers only).
  19.  
  20. It requires additional functions and libraries:
  21. - event_attacher.js
  22.     http://www.fczbkk.sk/js/event_attacher/
  23. - fix_e.js
  24.     http://www.fczbkk.sk/js/fix_e/
  25. - class_magic.js
  26.     http://www.fczbkk.sk/js/class_magic/
  27.  
  28. ATTENTION!!! Additional libraries and functions must be placed/linked before
  29. checkForm.
  30.  
  31. All used scripts and libraries are writen by me, except "Event Attacher", which
  32. was writen by Scott Andrew (http://www.scottandrew.com/). Feel free to use
  33. and/or modify them (as far as I know, "Event Attacher" is free to use too), just
  34. please let me know where you used it if possible (I want to see it in action).
  35. Any suggestions, comments, bugreports, modifications or functionality
  36. enhancements are wellcome.
  37. */
  38.  
  39. /*
  40. Formatting of the fields (e.g. highlighting of "required" or "invalid" fields)
  41. is defined in external CSS file "check_field.css". These definitions can be
  42. modified to fit your layout and they can be moved anywhere into your CSS
  43. definitions.
  44. */
  45.  
  46. // object holding all other functions and variables
  47. var checkForm = {};
  48.  
  49.  
  50. /*
  51. Regular expression builder, used for simplier adding or editing of character
  52. groups.
  53. */
  54. checkForm.buildRegExp = function(str) {
  55.     if (str) {return new RegExp("^[" + str + "]{1,}$");}
  56.     return false;
  57. }
  58.  
  59.  
  60.  
  61. /* -------------- customizations start here -------------- */
  62.  
  63.  
  64.  
  65. /*
  66. Message, which will be displayed in the alert, when user tries to submit
  67. incomplete or invalid form.
  68. */
  69. checkForm.invalidMsg = "Nektere polozky odesilaneho formulare nejsou vyplneny spravne.\n\nProsim, vyplnte vsechy povinne polozky (oznacene cervenou teckou) a opravte polozky s nespravnym obsahem (oznacene cervenym textem) a zkuste odeslat formular znova.";
  70.  
  71. /*
  72. Acceptable characters or regular expressions defining valid content of checked
  73. classes.
  74. */
  75. checkForm.fieldType = new Array();
  76. checkForm.fieldType["safeChars"] =                checkForm.buildRegExp("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_");
  77. checkForm.fieldType["numbers"] =            checkForm.buildRegExp("0123456789");
  78. checkForm.fieldType["alphabetLowercase"] =    checkForm.buildRegExp("abcdefghijklmnopqrstuvwxyz");
  79. checkForm.fieldType["alphabetUppercase"] =    checkForm.buildRegExp("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  80. checkForm.fieldType["alphabet"] =                checkForm.buildRegExp("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
  81. checkForm.fieldType["alphanumeric"] =            checkForm.buildRegExp("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789");
  82. checkForm.fieldType["date"] =                new RegExp("^[0-9]{1,2}[.][0-9]{1,2}[.][0-9]{4}$");    // in format (D)D.(M)M.YYYY
  83. /* IE4 nezvlada tento retulerny vyraz (URL) */
  84. checkForm.fieldType["url"] =                new RegExp("^http:\/\/[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])*\.[a-zA-Z]{2,4}(\/{1}[-_~&=\?\.a-z0-9]*)*$");
  85. checkForm.fieldType["email"] =                new RegExp("^[a-z0-9]+[a-z0-9\._-]*[a-z0-9]+@[a-z0-9]+[a-z0-9\._-]*[a-z0-9]+\.[a-z]{2,4}$");
  86.  
  87.  
  88. /*
  89. Default values for classes. These will be displayed, if form field with given
  90. class is focused and empty.
  91. */
  92. checkForm.defaultValue = new Array();
  93. checkForm.defaultValue["url"] =                        "http://";
  94.  
  95.  
  96.  
  97. /* -------------- customizations end here -------------- */
  98.  
  99.  
  100.  
  101. /*
  102. Initialisation of checkForm when document is loaded. It finds all forms and
  103. fields, checks them and adds events to them.
  104. */
  105. checkForm.init = function() {
  106.     var forms = document.getElementsByTagName("form");
  107.     for (var i = 0; i < forms.length; i++) {
  108.         addEvent(forms[i], "submit", checkForm.check);
  109.         addEvent(forms[i], "reset", checkForm.check);
  110.     }
  111.  
  112.     var fields = checkForm.findInputs();
  113.     for (var i = 0; i < fields.length; i++) {
  114.         checkForm.checkField(fields[i]);
  115.         addEvent(fields[i], "blur", checkForm.checkField);
  116.         addEvent(fields[i], "focus", checkForm.checkField);
  117.         addEvent(fields[i], "keyup", checkForm.checkField);
  118.         addEvent(fields[i], "change", checkForm.checkField);
  119.     }
  120. }
  121.  
  122.  
  123. /*
  124. Helper functions, which finds all fields in given element and returns them in
  125. an array. If no element is specified, all fields in document are returned.
  126. */
  127. checkForm.findInputs = function(elm) {
  128.     var fields = new Array();
  129.     if (!elm) {elm = document;}
  130.  
  131.     var textareas = elm.getElementsByTagName("textarea");
  132.     var inputs = elm.getElementsByTagName("input");
  133.  
  134.     for (var i = 0; i < textareas.length; i++) {
  135.         fields[fields.length] = textareas[i];
  136.     }
  137.     for (var i = 0; i < inputs.length; i++) {
  138.         if ((inputs[i].type == "text") || (inputs[i].type == "password")) {
  139.             fields[fields.length] = inputs[i];
  140.         }
  141.     }
  142.  
  143.     return fields;
  144. }
  145.  
  146.  
  147. /*
  148. Checking the form before submitting. To be sure, we will check all fields of
  149. given form once more and cancel the submit action if some fields are invalid.
  150. */
  151. checkForm.check = function(e) {
  152.     e = fixE(e);
  153.     var obj = e.target;
  154.     while (obj.tagName != "FORM") {
  155.         obj = obj.parentNode;
  156.     }
  157.  
  158.     
  159.     var fields = checkForm.findInputs(obj);
  160.     for (var i = 0; i < fields.length; i++) {
  161.         if (checkForm.checkField(fields[i]) == "invalid") {
  162.             if (e.type == "submit") {
  163.                 alert(checkForm.invalidMsg);
  164.                 if (e.preventDefault) {
  165.                     e.preventDefault();
  166.                 }
  167.             }
  168.             return false;
  169.         }
  170.     }
  171.     return true;
  172. }
  173.  
  174.  
  175. /*
  176. Checking the form field.
  177. */
  178. checkForm.checkField = function(e) {
  179.     var obj;
  180.     if (e && e.tagName) {
  181.         obj = e;
  182.     } else {
  183.         e = fixE(e);
  184.         obj = e.target;
  185.     }
  186.     var fieldOK = true;
  187.     var classes = classMagic.get(obj);
  188.     
  189.     // required field can't be empty
  190.     if (classMagic.has(obj, "required")) {
  191.         fieldOK = (checkForm.isBlank(obj.value)) ? false : true;
  192.     }
  193.  
  194.     // find classes of given field and check, if there are any rules for it
  195.     var i = 0;
  196.     while (fieldOK && i < classes.length) {
  197.         if (checkForm.defaultValue[classes[i]]) {
  198.             if ((e.type == "focus") && checkForm.isBlank(obj.value)) {
  199.                 obj.value = checkForm.defaultValue[classes[i]];
  200.             }
  201.             if ((e.type == "blur") && (obj.value == checkForm.defaultValue[classes[i]])) {
  202.                 obj.value = "";
  203.             }
  204.         }
  205.         if (checkForm.fieldType[classes[i]]) {
  206.             fieldOK = (!checkForm.isBlank(obj.value) && checkForm.checkChars(obj.value, checkForm.fieldType[classes[i]])) ? false : true;
  207.         }
  208.         i++;
  209.     }
  210.     
  211.     
  212.     // if content of the field is not OK, highlight it as invalid
  213.     (fieldOK) ? classMagic.remove(obj, "invalid") : classMagic.add(obj, "invalid");
  214.  
  215.     /*
  216.     Function like this should return "true" or "false". But this would be
  217.     blocking of keyboard input in case of incomplete content of the field
  218.     (e.g. URL). That's why this function returns "valid" or "invalid".
  219.     */
  220.     return (fieldOK) ? "valid" : "invalid";
  221. }
  222.  
  223. /*
  224. Checks if given string contains given pattern (regullar expression).
  225. */
  226. checkForm.checkChars = function(str, re) {
  227.     if (str && re) {
  228.         return (str.search(re) == -1) ? true : false;
  229.     }
  230.     return true;
  231. }
  232.  
  233. /*
  234. Checks, if given string is blank or not.
  235. */
  236. checkForm.isBlank = function(str) {
  237.     return (str == "") ? true : false;
  238. }
  239.  
  240.  
  241. /*
  242. Initialize script when document is loaded.
  243. */
  244. addEvent(window, "load", checkForm.init);