Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]JQuery walidacja
kamilo818
post
Post #1





Grupa: Zarejestrowani
Postów: 250
Pomógł: 11
Dołączył: 20.01.2014

Ostrzeżenie: (0%)
-----


Waliduje w locie pole forularza w taki sposób

  1. <div class="rejestracja">
  2.  
  3. <form>
  4. <table>
  5. <tr>
  6. <td colspan="3" id="naglowek">
  7. <label>
  8. Dane osobowe
  9. </label>
  10. </td>
  11. </tr>
  12. <tr>
  13. <td id="lewe">
  14. <label>Imię: </label>
  15. </td>
  16. <td>
  17. <input type="text" id="imie" zwalidowane=""/>
  18. </td>
  19. <td id="validation">
  20.  
  21. </td>
  22. </tr>
  23. <tr>
  24. <td id="lewe">
  25. <label>Nazwisko: </label>
  26. </td>
  27. <td>
  28. <input type="text" id="nazwisko" zwalidowane=""/>
  29. </td>
  30. <td id="validation">
  31.  
  32. </td>
  33. </tr>
  34. <tr>
  35. <td colspan="3" id="naglowek">
  36. <label>
  37. Dane kontaktowe
  38. </label>
  39. </td>
  40. </tr>
  41. <tr>
  42. <td id="lewe">
  43. <label>e-mail: </label>
  44. </td>
  45. <td>
  46. <input type="text" id="mail" zwalidowane=""/>
  47. </td>
  48. <td id="validation">
  49.  
  50. </td>
  51. </tr>
  52. <tr>
  53. <td id="lewe">
  54. <label>Nr telefonu: </label>
  55. </td>
  56. <td>
  57. <input type="text" id="telefon" zwalidowane=""/>
  58. </td>
  59. <td id="validation">
  60.  
  61. </td>
  62. </tr>
  63. <tr>
  64. <td colspan="3" id="naglowek">
  65. <label>
  66. Adres doręczeń
  67. </label>
  68. </td>
  69. </tr>
  70. <tr>
  71. <td id="lewe">
  72. <label>Ulica i nr mieszkania: </label>
  73. </td>
  74. <td>
  75. <input type="text" id="ulica"/>
  76. </td>
  77. <td id="validation">
  78.  
  79. </td>
  80. </tr>
  81. <tr>
  82. <td id="lewe">
  83. <label>Kod pocztowy: </label>
  84. </td>
  85. <td>
  86. <input type="text" id="kod" zwalidowane=""/>
  87. </td>
  88. <td id="validation">
  89.  
  90. </td>
  91. </tr>
  92. <tr>
  93. <td id="lewe">
  94. <label>Miasto: </label>
  95. </td>
  96. <td>
  97. <input type="text" id="miasto" zwalidowane=""/>
  98. </td>
  99. <td id="validation">
  100.  
  101. </td>
  102. </tr>
  103. <tr>
  104. <td colspan="3" id="naglowek">
  105. <label>
  106. Dane logowania
  107. </label>
  108. </td>
  109. </tr>
  110. <tr>
  111. <td id="lewe">
  112. <label>Login: </label>
  113. </td>
  114. <td>
  115. <input type="text" id="login" disabled/>
  116. </td>
  117. <td id="validation">
  118.  
  119. </td>
  120. </tr>
  121. <tr>
  122. <td id="lewe">
  123. <label>Hasło: </label>
  124. </td>
  125. <td>
  126. <input type="password" id="haslo" zwalidowane=""/>
  127. </td>
  128. <td id="validation">
  129.  
  130. </td>
  131. </tr>
  132. <tr>
  133. <td id="lewe">
  134. <label>Powtórz hasło: </label>
  135. </td>
  136. <td>
  137. <input type="password" id="haslo2" zwalidowane=""/>
  138. </td>
  139. <td id="validation">
  140.  
  141. </td>
  142. </tr>
  143. <tr>
  144. <td colspan="3" id="rejestruj">
  145. <label>
  146. Rejestruj
  147. </label>
  148. </td>
  149. </tr>
  150. </table>
  151. </form>
  152.  
  153. </div>
  154.  
  155. <script>
  156.  
  157. $("div.rejestracja :input").bind("keyup change", function () {
  158.  
  159. if ($(this).attr('id') == 'imie' || $(this).attr('id') == 'miasto' || $(this).attr('id') == 'nazwisko') {
  160. var Reg = /^[a-zA-Z]{2,}$/;
  161. var validate = $(this).val();
  162. waliduj(validate, Reg, $(this));
  163. }
  164. if ($(this).attr('id') == 'mail') {
  165. var Reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  166. var validate = $(this).val();
  167. waliduj(validate, Reg, $(this));
  168. if(validate==''){
  169. $(this).parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/no.PNG")'});
  170. $(this).attr('zwalidowane','');
  171. }
  172. $('div.rejestracja input#login').val(validate);
  173. }
  174. if ($(this).attr('id') == 'kod') {
  175. var Reg = /[0-9]{2}-[0-9]{3}/g;
  176. var validate = $(this).val();
  177. waliduj(validate, Reg, $(this));
  178. }
  179. if ($(this).attr('id') == 'telefon') {
  180. var Reg = /^\d{9,}$/;
  181. var validate = $(this).val();
  182. waliduj(validate, Reg, $(this));
  183. }
  184.  
  185. if ($(this).attr('id') == 'haslo') {
  186. var Reg = /^[A-Z]{1}[a-z0-9]{5,9}$/;
  187. var validate = $(this).val();
  188. waliduj(validate, Reg, $(this));
  189. }
  190. if ($(this).attr('id') == 'haslo2') {
  191. var Reg = /^[A-Z]{1}[a-z0-9]{5,9}$/;
  192. var validate = $(this).val();
  193. var ok = waliduj(validate, Reg, $(this));
  194.  
  195. if (validate == $('div.rejestracja #haslo').val() && ok==true) {
  196. $(this).parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/yes.PNG")'});
  197. $(this).attr('zwalidowane','true');
  198. } else {
  199. $(this).parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/no.PNG")'});
  200. }
  201. }
  202. });
  203.  
  204.  
  205. $('div.rejestracja #rejestruj').click(function(){
  206. $('div.rejestracja input[zwalidowane]').each(function(){
  207. if($(this).attr('zwalidowane')!=''){
  208. alert('wypelnij wszystkie pola');
  209. }
  210. });
  211. });
  212.  
  213. function waliduj(x, y, z) {
  214. if (!y.test(x)) {
  215. z.parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/no.PNG")'});
  216. z.attr('zwalidowane','');
  217. } else {
  218. z.parent('td').siblings('#validation').css({'background-image': 'url("http://localhost/shop/yes.PNG")'});
  219. z.attr('zwalidowane','true');
  220.  
  221. return ok=true;
  222. }
  223. }
  224.  
  225. </script>



Po tym jak poprawie zwaliduje pole nadaje elemntowi html wartosc argumentu zwalidowane=true;
Po kliknięciu w przycisk Rejestruj zczytuje po kolei czy wszystkie wartosci zwaliduje są na true, jesli tak to przesyla formularz.

Tylko to słabe rozwiązanie bo z poziomu przeglądarki można to z ręki zmienić wartość alementu html i blędnei przesłąc forularz.

Próbowałem jakąś zmienna zadeklarować która trzymałą by wartosći które elementy są poprawnie zwalidowane ale nie dałem rady. Może ktoś podsunie pomysł jak to zrobić?
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 4.10.2025 - 11:58