PageRenderTime 85ms CodeModel.GetById 12ms RepoModel.GetById 0ms app.codeStats 0ms

/backend/Coco/assets/js/pages/form-validation.js

https://gitlab.com/kaouech/theme
JavaScript | 290 lines | 271 code | 12 blank | 7 comment | 2 complexity | ce7a70cec17f50d0240051e7b78b1348 MD5 | raw file
  1. $(document).ready(function() {
  2. // Generate a simple captcha
  3. function randomNumber(min, max) {
  4. return Math.floor(Math.random() * (max - min + 1) + min);
  5. };
  6. $('#captchaOperation').html([randomNumber(1, 20), '+', randomNumber(1, 30), '='].join(' '));
  7. //EXAMPLE REGISTER FORM
  8. $('#registerForm').bootstrapValidator({
  9. message: 'This value is not valid',
  10. fields: {
  11. username: {
  12. message: 'The username is not valid',
  13. validators: {
  14. notEmpty: {
  15. message: 'The username is required and can\'t be empty'
  16. },
  17. stringLength: {
  18. min: 6,
  19. max: 30,
  20. message: 'The username must be more than 6 and less than 30 characters long'
  21. },
  22. regexp: {
  23. regexp: /^[a-zA-Z0-9_\.]+$/,
  24. message: 'The username can only consist of alphabetical, number, dot and underscore'
  25. },
  26. different: {
  27. field: 'password',
  28. message: 'The username and password can\'t be the same as each other'
  29. }
  30. }
  31. },
  32. email: {
  33. validators: {
  34. notEmpty: {
  35. message: 'The email address is required and can\'t be empty'
  36. },
  37. emailAddress: {
  38. message: 'The input is not a valid email address'
  39. }
  40. }
  41. },
  42. password: {
  43. validators: {
  44. notEmpty: {
  45. message: 'The password is required and can\'t be empty'
  46. },
  47. identical: {
  48. field: 'confirmPassword',
  49. message: 'The password and its confirm are not the same'
  50. },
  51. different: {
  52. field: 'username',
  53. message: 'The password can\'t be the same as username'
  54. }
  55. }
  56. },
  57. confirmPassword: {
  58. validators: {
  59. notEmpty: {
  60. message: 'The confirm password is required and can\'t be empty'
  61. },
  62. identical: {
  63. field: 'password',
  64. message: 'The password and its confirm are not the same'
  65. },
  66. different: {
  67. field: 'username',
  68. message: 'The password can\'t be the same as username'
  69. }
  70. }
  71. },
  72. phoneNumber: {
  73. validators: {
  74. digits: {
  75. message: 'The value can contain only digits'
  76. }
  77. }
  78. },
  79. acceptTerms: {
  80. validators: {
  81. notEmpty: {
  82. message: 'You have to accept the terms and policies'
  83. }
  84. }
  85. },
  86. captcha: {
  87. validators: {
  88. callback: {
  89. message: 'Wrong answer',
  90. callback: function(value, validator) {
  91. var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
  92. return value == sum;
  93. }
  94. }
  95. }
  96. }
  97. }
  98. });
  99. //EXAMPLE CONTACT FORM
  100. $('#contactForm').bootstrapValidator({
  101. message: 'This value is not valid',
  102. fields: {
  103. name: {
  104. message: 'Name is not valid',
  105. validators: {
  106. notEmpty: {
  107. message: 'Name is required and can\'t be empty'
  108. },
  109. regexp: {
  110. regexp: /^[a-zA-Z0-9_\.]+$/,
  111. message: 'Name can only consist of alphabetical, number, dot and underscore'
  112. }
  113. }
  114. },
  115. email: {
  116. validators: {
  117. notEmpty: {
  118. message: 'The email address is required and can\'t be empty'
  119. },
  120. emailAddress: {
  121. message: 'The input is not a valid email address'
  122. }
  123. }
  124. },
  125. website: {
  126. validators: {
  127. uri: {
  128. message: 'The input is not a valid URL'
  129. }
  130. }
  131. },
  132. Contactmessage: {
  133. validators: {
  134. notEmpty: {
  135. message: 'Message is required and can\'t be empty'
  136. },
  137. stringLength: {
  138. min: 6,
  139. message: 'Message must be more than 6 characters long'
  140. }
  141. }
  142. },
  143. captcha: {
  144. validators: {
  145. callback: {
  146. message: 'Wrong answer',
  147. callback: function(value, validator) {
  148. var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
  149. return value == sum;
  150. }
  151. }
  152. }
  153. }
  154. }
  155. });
  156. //Regular expression based validators
  157. $('#ExpressionValidator').bootstrapValidator({
  158. message: 'This value is not valid',
  159. fields: {
  160. email: {
  161. validators: {
  162. notEmpty: {
  163. message: 'The email address is required and can\'t be empty'
  164. },
  165. emailAddress: {
  166. message: 'The input is not a valid email address'
  167. }
  168. }
  169. },
  170. website: {
  171. validators: {
  172. uri: {
  173. message: 'The input is not a valid URL'
  174. }
  175. }
  176. },
  177. phoneNumber: {
  178. validators: {
  179. digits: {
  180. message: 'The value can contain only digits'
  181. }
  182. }
  183. },
  184. color: {
  185. validators: {
  186. hexColor: {
  187. message: 'The input is not a valid hex color'
  188. }
  189. }
  190. },
  191. zipCode: {
  192. validators: {
  193. usZipCode: {
  194. message: 'The input is not a valid US zip code'
  195. }
  196. }
  197. }
  198. }
  199. });
  200. //Regular expression based validators
  201. $('#NotEmptyValidator').bootstrapValidator({
  202. message: 'This value is not valid',
  203. fields: {
  204. username: {
  205. message: 'The username is not valid',
  206. validators: {
  207. notEmpty: {
  208. message: 'The username is required and can\'t be empty'
  209. },
  210. stringLength: {
  211. min: 6,
  212. max: 30,
  213. message: 'The username must be more than 6 and less than 30 characters long'
  214. },
  215. regexp: {
  216. regexp: /^[a-zA-Z0-9_\.]+$/,
  217. message: 'The username can only consist of alphabetical, number, dot and underscore'
  218. }
  219. }
  220. },
  221. country: {
  222. validators: {
  223. notEmpty: {
  224. message: 'The country is required and can\'t be empty'
  225. }
  226. }
  227. }
  228. }
  229. });
  230. //Regular expression based validators
  231. $('#IdenticalValidator').bootstrapValidator({
  232. message: 'This value is not valid',
  233. fields: {
  234. password: {
  235. validators: {
  236. notEmpty: {
  237. message: 'The password is required and can\'t be empty'
  238. },
  239. identical: {
  240. field: 'confirmPassword',
  241. message: 'The password and its confirm are not the same'
  242. }
  243. }
  244. },
  245. confirmPassword: {
  246. validators: {
  247. notEmpty: {
  248. message: 'The confirm password is required and can\'t be empty'
  249. },
  250. identical: {
  251. field: 'password',
  252. message: 'The password and its confirm are not the same'
  253. }
  254. }
  255. }
  256. }
  257. });
  258. //Regular expression based validators
  259. $('#OtherValidator').bootstrapValidator({
  260. message: 'This value is not valid',
  261. fields: {
  262. ages: {
  263. validators: {
  264. lessThan: {
  265. value: 100,
  266. inclusive: true,
  267. message: 'The ages has to be less than 100'
  268. },
  269. greaterThan: {
  270. value: 10,
  271. inclusive: false,
  272. message: 'The ages has to be greater than or equals to 10'
  273. }
  274. }
  275. }
  276. }
  277. });
  278. });