API tools faq
paste
jeges

live example for formChecker v0.2

jeges
Aug 1st, 2011
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5. <title>teszt</title>
  6. <style type="text/css">
  7.  
  8. #fm {width:500px;display:block;margin:0; padding:0;}
  9. #fm label, #fm input {display:inline;float:left;position:relative;margin:0 0 5px 5px; padding:0;font:normal 12px Verdana;}
  10. #fm label {width:200px; font-weight:700; text-align:right;}
  11. #fm input {width:250px; text-align:left;}
  12. #send {width:60px !important;font-weight:700 !important;text-align:center !important; margin-left:200px !important;}
  13. #log {width:500px;height:100px;display:block;float:left;position:relative;}
  14. #errorMsg {
  15.     width:300px;height:100px;left:300px;top:200px;display:block;position:fixed;
  16.     text-align:center;vertical-align:middle; border:2px solid #F5F5F5; background:#DDD;
  17. }
  18. .failed{background:#FEE;}
  19. .succeeded{background:#EFE;}
  20. </style>
  21.  
  22. <script src="rule.js" type="text/javascript"></script>
  23.  
  24. <script type="text/javascript">
  25.  
  26. myRule = {
  27.  
  28.     first: {
  29.         sbj: "nm",
  30.         fnc: "nn",
  31.         prm: "",
  32.         msg: "Name can not be empty."
  33.     },
  34.  
  35.     second: {
  36.         sbj: "yr",
  37.         fnc: "gt",
  38.         prm: ".minyr",
  39.         msg: "Must by over 18."
  40.     },
  41.  
  42.     third: {
  43.         sbj: "yr",
  44.         fnc: "lt",
  45.         prm: "#maxyr",
  46.         msg: "Must be under 99."
  47.     },
  48.  
  49.     fourth: {
  50.         sbj: "cn",
  51.         fnc: "nn",
  52.         prm: "",
  53.         msg: "Country can not be empty."
  54.     },
  55.  
  56.     fifth: {
  57.         sbj: "cn",
  58.         fnc: "rg",
  59.         prm: ["^hu","i"],
  60.         msg: "Only for hungarian residents."
  61.     },
  62.  
  63.     sixth: {
  64.         sbj: "cn",
  65.         fnc: "ex",
  66.         prm: "hu",
  67.         msg: "Only for citizens of republic of Hungary."
  68.     }/*,
  69.  
  70.     seventh: {
  71.         sbj: "cn",
  72.         fnc: "dd",
  73.         prm: "hu",
  74.         msg: "Errorous rule."
  75.     }*/
  76.  
  77. }
  78.  
  79. window.onload = function(){
  80.  
  81.     setElem = function(o,msg,cl){
  82.         var s = "\n";
  83.         if (!o.title || o.title == "" || msg == undefined || msg == "")s = "";
  84.         o.title += s + msg;
  85.         removeClass(o,"succeeded");
  86.         removeClass(o,"failed");
  87.         addClass(o,cl);
  88.     }
  89.  
  90.     // function to clear given form's inputs
  91.     // defined for formChecker to run on reset
  92.     clear = function(fm){
  93.         var lm = fm.getElementsByTagName("*");
  94.         for (var i = 0; i < lm.length; i++){
  95.             try {
  96.                     lm[i].title = "";
  97.                     removeClass(lm[i],"succeeded");
  98.                     removeClass(lm[i],"failed");
  99.  
  100.             }catch(e){
  101.                 continue;
  102.             }
  103.         }
  104.     }
  105.     // callback to execute on successful check
  106.     success = function(o,msg){
  107.         var c = "succeeded";
  108.         if(gotClass(o,"failed"))c = "failed";
  109.         setElem(o,msg,c);
  110.     }
  111.     // callback to execute on failed check
  112.     fail = function(o,msg){
  113.         setElem(o,msg,"failed");
  114.     }
  115.     // callback to execute on error
  116.     error = function(er){
  117.  
  118.         if ( !$fc(document.body,"errorMsg") ){
  119.             var ed = document.createElement("div");
  120.             ed.className = "errorMsg";
  121.             ed.title = "click to disappear";
  122.             ed.innerHTML = er;
  123.             document.body.appendChild(ed);
  124.             ed.onclick = function(){ document.body.removeChild(ed); }
  125.         }
  126.         else $fc(document.body,"errorMsg").innerHTML += "<br>" + er;
  127.     }
  128.  
  129.     var sn = $lm("send");
  130.     var fm = $lm("fm");
  131.     var lg = $lm("log");
  132.  
  133.     sn.onclick = function(){
  134.  
  135.         lg.innerHTML = "";
  136.  
  137.         var fc = new formChecker(fm,myRule,clear,success,fail,error);
  138.  
  139.         if (fc.chk() == 0){lg.innerHTML = "All checks are ok";}
  140.  
  141.     }
  142.  
  143. }
  144.  
  145. </script>
  146. </head>
  147. <body>
  148.  
  149. <form id="fm" name="fm" method="post">
  150.  
  151. <label for="fnm">Firstname</label><input type="text" name="fnm" id="fnm" class="nm" value="fname" />
  152. <label for="lnm">Lastname</label><input type="text" name="lnm" id="lnm" class="nm" value="lname" />
  153. <label for="yr">Age</label><input type="text" name="yr" id="yr" class="yr" value="25" />
  154. <label for="minyr">Minimum age</label><input type="text" name="minyr" id="minyr" class="minyr" value="18" />
  155. <label for="maxyr">Maximum age</label><input type="text" name="maxyr" id="maxyr" class="maxyr" value="99" />
  156. <label for="cn">Country</label><input type="text" name="cn" id="cn" class="cn" value="country (short, i.e. hu or en)" />
  157. <input type="button" name="send" id="send" value="send" />
  158.  
  159. </form>
  160. <br>
  161. <div id="log"></log>
  162. </body>
  163. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!