Witam.

Mam problem. sad.gif

Znalazłem w internecie fajny skrypt do validacji danych. Wszystko ładnie pięknie ale problem pojawia się przy przerzucaniu na smarty...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.  
  9. <title>Dynamic Inline Form Validation Demo</title>
  10.  
  11. <link rel="stylesheet" type="text/css" href="css/messages.css" />
  12.  
  13. <script type="text/javascript" src="javascript/messages.js"></script>
  14.  
  15. </head>
  16.  
  17. <body>
  18.  
  19. <div id="wrapper">
  20.  
  21.   <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
  22.  
  23.     <label for="brutto">Full brutto:</label>
  24.  
  25.     <input type="text" name="brutto" id="brutto" />
  26.  
  27.   Gender
  28.  
  29.     <select name="msc" id="msc">
  30.  
  31.       <option value ="">Wybierz miesiąc</option>
  32.  
  33.       <option value="1">Stczeń</option>
  34.  
  35. <option value="2">Luty</option>
  36.  
  37. <option value="3">Marzec</option>
  38.  
  39. <option value="4">Kwiecień</option>
  40.  
  41. <option value="5">Maj</option>
  42.  
  43. <option value="6">Czerwiec</option>
  44.  
  45. <option value="7">Lipiec</option>
  46.  
  47. <option value="8">Sierpień</option>
  48.  
  49. <option value="9">Wrzesień</option>
  50.  
  51. <option value="10">Październik</option>
  52.  
  53. <option value="11">Listopad</option>
  54.  
  55. <option value="12">Grudzień</option>
  56.  
  57.     </select>
  58.  
  59. <label for="pracownik">pracownik:</label>
  60.  
  61.     <select name="pracownik" id="pracownik">
  62.  
  63.       <option value ="">Wybierz miesiąc</option>
  64.  
  65.       <option value="1">Stczeń</option>
  66.  
  67. <option value="2">Luty</option>
  68.  
  69. <option value="3">Marzec</option>
  70.  
  71. <option value="4">Kwiecień</option>
  72.  
  73. <option value="5">Maj</option>
  74.  
  75. <option value="6">Czerwiec</option>
  76.  
  77. <option value="7">Lipiec</option>
  78.  
  79. <option value="8">Sierpień</option>
  80.  
  81. <option value="9">Wrzesień</option>
  82.  
  83. <option value="10">Październik</option>
  84.  
  85. <option value="11">Listopad</option>
  86.  
  87. <option value="12">Grudzień</option>
  88.  
  89.     </select>
  90.  
  91. <label for="msc2[]">msc:</label>
  92.  
  93.     <select name="msc2[]" id="msc2">
  94.  
  95.       <option value ="">Wybierz miesiąc</option>
  96.  
  97.       <option value="1">Stczeń</option>
  98.  
  99. <option value="2">Luty</option>
  100.  
  101. <option value="3">Marzec</option>
  102.  
  103. <option value="4">Kwiecień</option>
  104.  
  105. <option value="5">Maj</option>
  106.  
  107. <option value="6">Czerwiec</option>
  108.  
  109. <option value="7">Lipiec</option>
  110.  
  111. <option value="8">Sierpień</option>
  112.  
  113. <option value="9">Wrzesień</option>
  114.  
  115. <option value="10">Październik</option>
  116.  
  117. <option value="11">Listopad</option>
  118.  
  119. <option value="12">Grudzień</option>
  120.  
  121.     </select>
  122.  
  123. <label for="konto[]">konto:</label>
  124.  
  125.     <select name="konto[]" id="konto">
  126.  
  127.       <option value ="">Wybierz konto</option>
  128.  
  129.       <option value="1">Stczeń</option>
  130.  
  131. <option value="2">Luty</option>
  132.  
  133. <option value="3">Marzec</option>
  134.  
  135. <option value="4">Kwiecień</option>
  136.  
  137. <option value="5">Maj</option>
  138.  
  139. <option value="6">Czerwiec</option>
  140.  
  141. <option value="7">Lipiec</option>
  142.  
  143. <option value="8">Sierpień</option>
  144.  
  145. <option value="9">Wrzesień</option>
  146.  
  147. <option value="10">Październik</option>
  148.  
  149. <option value="11">Listopad</option>
  150.  
  151. <option value="12">Grudzień</option>
  152.  
  153.     </select>
  154.  
  155.     <label for="opis">Opis:</label>
  156.  
  157.     <input type="text" name="opis" id="opis" />
  158.  
  159.     <label for="kwota">Full kwota:</label>
  160.  
  161.     <input type="text" name="kwota[]" id="kwota" />
  162.  
  163.     <input type="submit" value="Submit" class="submit" />
  164.  
  165.   </form>
  166.  
  167. </div>
  168.  
  169. </body>
  170.  
  171. </html>
[HTML] pobierz, plaintext


zawartość pliku css

[CSS] pobierz, plaintext 
  1. * {margin:0; padding:0}
  2.  
  3. body {font:12px Verdana, Arial, Helvetica, sans-serif; color:#666}
  4.  
  5. #wrapper {width:300px; margin:50px auto}
  6.  
  7. .form {float:left; padding:0 10px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf}
  8.  
  9. .form label {float:left; width:100px; padding:10px 10px 0 0; font-weight:bold}
  10.  
  11. .form select {float:left; width:146px; margin-top:10px}
  12.  
  13. .form input {float:left; margin-top:10px}
  14.  
  15. .form .submit {clear:both}
  16.  
  17. #msg {display:none; position:absolute; z-index:200; background:url(img/msg_arrow.gif) left center no-repeat; padding-left:7px}
  18.  
  19. #msgcontent {display:block; background:#f3e6e6; border:2px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}
[CSS] pobierz, plaintext


zawartość pliku js

[JAVASCRIPT] pobierz, plaintext 
  1. // form validation function //
  2. function validate(form) {
  3.   var brutto = form.brutto.value;
  4.   var kwota = form.kwota.value;
  5.   var msc = form.msc.value;
  6.   var msc2 = form.msc2.value;
  7.   var konto = form.konto.value;
  8.   var pracownik = form.pracownik.value;
  9.   var opis = form.opis.value;
  10.   var bruttoRegex = /^(\d|-)?(\d|,)*\.?\d*$/;
  11.   var kwotaRegex =  /^(\d|-)?(\d|,)*\.?\d*$/;
  12.   var cosRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
  13.   var opisRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);
  14.   if(brutto == "") {
  15.     inlineMsg('brutto','You must enter your brutto.',2);
  16.     return false;
  17.   }
  18.   if(!brutto.match(bruttoRegex)) {
  19.     inlineMsg('brutto','You have entered an invalid brutto.',2);
  20.     return false;
  21.   }
  22.   if(msc == "") {
  23.     inlineMsg('msc','<strong>Error</strong><br />You must select your msc.',2);
  24.     return false;
  25.   }
  26. if(pracownik == "") {
  27.     inlineMsg('pracownik','<strong>Error</strong><br />You must select your pracownik.',2);
  28.     return false;
  29.   }
  30. if(msc2 == "") {
  31.     inlineMsg('msc2','<strong>Error</strong><br />You must select your msc2[].',2);
  32.     return false;
  33.   }
  34. if(konto == "") {
  35.     inlineMsg('konto','<strong>Error</strong><br />You must select your konto[].',2);
  36.     return false;
  37.   }
  38.   if(kwota == "") {
  39.     inlineMsg('kwota','You must enter your kwota.',2);
  40.     return false;
  41.   }
  42.   if(opis == "") {
  43.     inlineMsg('opis','You must enter a opis.');
  44.     return false;
  45.   }
  46.   if(opis.match(opisRegex)) {
  47.     inlineMsg('opis','You have entered an invalid opis.');
  48.     return false;
  49.   }
  50.   return true;
  51. }
  52.  
  53. // START OF MESSAGE SCRIPT //
  54.  
  55. var MSGTIMER = 20;
  56. var MSGSPEED = 5;
  57. var MSGOFFSET = 3;
  58. var MSGHIDE = 3;
  59.  
  60. // build out the divs, set attributes and call the fade function //
  61. function inlineMsg(target,string,autohide) {
  62.   var msg;
  63.   var msgcontent;
  64.   if(!document.getElementById('msg')) {
  65.     msg = document.createElement('div');
  66.     msg.id = 'msg';
  67.     msgcontent = document.createElement('div');
  68.     msgcontent.id = 'msgcontent';
  69.     document.body.appendChild(msg);
  70.     msg.appendChild(msgcontent);
  71.     msg.style.filter = 'alpha(opacity=0)';
  72.     msg.style.opacity = 0;
  73.     msg.alpha = 0;
  74.   } else {
  75.     msg = document.getElementById('msg');
  76.     msgcontent = document.getElementById('msgcontent');
  77.   }
  78.   msgcontent.innerHTML = string;
  79.   msg.style.display = 'block';
  80.   var msgheight = msg.offsetHeight;
  81.   var targetdiv = document.getElementById(target);
  82.   targetdiv.focus();
  83.   var targetheight = targetdiv.offsetHeight;
  84.   var targetwidth = targetdiv.offsetWidth;
  85.   var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
  86.   var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
  87.   msg.style.top = topposition + 'px';
  88.   msg.style.left = leftposition + 'px';
  89.   clearInterval(msg.timer);
  90.   msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
  91.   if(!autohide) {
  92.     autohide = MSGHIDE;  
  93.   }
  94.   window.setTimeout("hideMsg()", (autohide * 1000));
  95. }
  96.  
  97. // hide the form alert //
  98. function hideMsg(msg) {
  99.   var msg = document.getElementById('msg');
  100.   if(!msg.timer) {
  101.     msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
  102.   }
  103. }
  104.  
  105. // face the message box //
  106. function fadeMsg(flag) {
  107.   if(flag == null) {
  108.     flag = 1;
  109.   }
  110.   var msg = document.getElementById('msg');
  111.   var value;
  112.   if(flag == 1) {
  113.     value = msg.alpha + MSGSPEED;
  114.   } else {
  115.     value = msg.alpha - MSGSPEED;
  116.   }
  117.   msg.alpha = value;
  118.   msg.style.opacity = (value / 100);
  119.   msg.style.filter = 'alpha(opacity=' + value + ')';
  120.   if(value >= 99) {
  121.     clearInterval(msg.timer);
  122.     msg.timer = null;
  123.   } else if(value <= 1) {
  124.     msg.style.display = "none";
  125.     clearInterval(msg.timer);
  126.   }
  127. }
  128.  
  129. // calculate the position of the element in relation to the left of the browser //
  130. function leftPosition(target) {
  131.   var left = 0;
  132.   if(target.offsetParent) {
  133.     while(1) {
  134.       left += target.offsetLeft;
  135.       if(!target.offsetParent) {
  136.         break;
  137.       }
  138.       target = target.offsetParent;
  139.     }
  140.   } else if(target.x) {
  141.     left += target.x;
  142.   }
  143.   return left;
  144. }
  145.  
  146. // calculate the position of the element in relation to the top of the browser window //
  147. function topPosition(target) {
  148.   var top = 0;
  149.   if(target.offsetParent) {
  150.     while(1) {
  151.       top += target.offsetTop;
  152.       if(!target.offsetParent) {
  153.         break;
  154.       }
  155.       target = target.offsetParent;
  156.     }
  157.   } else if(target.y) {
  158.     top += target.y;
  159.   }
  160.   return top;
  161. }
  162.  
  163. // preload the arrow //
  164. if(document.images) {
  165.   arrow = new Image(7,80); 
  166.   arrow.src = "images/msg_arrow.gif"; 
  167. }
[JAVASCRIPT] pobierz, plaintext


Jak próbuję validować w smarty to formularz jest puszczany bez validacji a na html dziala pieknie tongue.gif

Wie ktoś może jak wepchac to do smarty?

Z góry dziękuję smile.gif

Ktoś pomoże?tongue.gif