PageRenderTime 60ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 0ms

/backend/Nifty/js/demo/form-validation.js

https://gitlab.com/kaouech/theme
JavaScript | 548 lines | 468 code | 32 blank | 48 comment | 19 complexity | 5d4347b97d37aa21464cb9cf458f5a0f MD5 | raw file
  1. // Form-Validation.js
  2. // ====================================================================
  3. // This file should not be included in your project.
  4. // This is just a sample how to initialize plugins or components.
  5. //
  6. // - ThemeOn.net -
  7. $(document).ready(function() {
  8. // FORM VALIDATION
  9. // =================================================================
  10. // Require Bootstrap Validator
  11. // http://bootstrapvalidator.com/
  12. // =================================================================
  13. // FORM VALIDATION FEEDBACK ICONS
  14. // =================================================================
  15. var faIcon = {
  16. valid: 'fa fa-check-circle fa-lg text-success',
  17. invalid: 'fa fa-times-circle fa-lg',
  18. validating: 'fa fa-refresh'
  19. }
  20. // FORM VALIDATION ON TABS
  21. // =================================================================
  22. $('#demo-bv-bsc-tabs').bootstrapValidator({
  23. excluded: [':disabled'],
  24. feedbackIcons: faIcon,
  25. fields: {
  26. fullName: {
  27. validators: {
  28. notEmpty: {
  29. message: 'The full name is required'
  30. }
  31. }
  32. },
  33. company: {
  34. validators: {
  35. notEmpty: {
  36. message: 'The company name is required'
  37. }
  38. }
  39. },
  40. memberType: {
  41. validators: {
  42. notEmpty: {
  43. message: 'Please choose the membership type that best meets your needs'
  44. }
  45. }
  46. },
  47. address: {
  48. validators: {
  49. notEmpty: {
  50. message: 'The address is required'
  51. }
  52. }
  53. },
  54. city: {
  55. validators: {
  56. notEmpty: {
  57. message: 'The city is required'
  58. }
  59. }
  60. },
  61. country: {
  62. validators: {
  63. notEmpty: {
  64. message: 'The city is required'
  65. }
  66. }
  67. }
  68. }
  69. }).on('status.field.bv', function(e, data) {
  70. var $form = $(e.target),
  71. validator = data.bv,
  72. $tabPane = data.element.parents('.tab-pane'),
  73. tabId = $tabPane.attr('id');
  74. if (tabId) {
  75. var $icon = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent().find('i');
  76. // Add custom class to tab containing the field
  77. if (data.status == validator.STATUS_INVALID) {
  78. $icon.removeClass(faIcon.valid).addClass(faIcon.invalid);
  79. } else if (data.status == validator.STATUS_VALID) {
  80. var isValidTab = validator.isValidContainer($tabPane);
  81. $icon.removeClass(faIcon.valid).addClass(isValidTab ? faIcon.valid : faIcon.invalid);
  82. }
  83. }
  84. });
  85. // FORM VALIDATION ON ACCORDION
  86. // =================================================================
  87. $('#demo-bv-accordion').bootstrapValidator({
  88. message: 'This value is not valid',
  89. excluded: ':disabled',
  90. feedbackIcons: faIcon,
  91. fields: {
  92. firstName: {
  93. validators: {
  94. notEmpty: {
  95. message: 'The first name is required and cannot be empty'
  96. },
  97. regexp: {
  98. regexp: /^[A-Z\s]+$/i,
  99. message: 'The first name can only consist of alphabetical characters and spaces'
  100. }
  101. }
  102. },
  103. lastName: {
  104. validators: {
  105. notEmpty: {
  106. message: 'The last name is required and cannot be empty'
  107. },
  108. regexp: {
  109. regexp: /^[A-Z\s]+$/i,
  110. message: 'The last name can only consist of alphabetical characters and spaces'
  111. }
  112. }
  113. },
  114. username: {
  115. message: 'The username is not valid',
  116. validators: {
  117. notEmpty: {
  118. message: 'The username is required and cannot be empty'
  119. },
  120. stringLength: {
  121. min: 4,
  122. max: 30,
  123. message: 'The username must be more than 4 and less than 30 characters long'
  124. },
  125. regexp: {
  126. regexp: /^[a-zA-Z0-9_\.]+$/,
  127. message: 'The username can only consist of alphabetical, number, dot and underscore'
  128. },
  129. different: {
  130. field: 'password',
  131. message: 'The username and password cannot be the same as each other'
  132. }
  133. }
  134. },
  135. email: {
  136. validators: {
  137. notEmpty: {
  138. message: 'The email address is required and cannot be empty'
  139. },
  140. emailAddress: {
  141. message: 'The input is not a valid email address'
  142. }
  143. }
  144. },
  145. password: {
  146. validators: {
  147. notEmpty: {
  148. message: 'The password is required and cannot be empty'
  149. },
  150. different: {
  151. field: 'username',
  152. message: 'The password cannot be the same as username'
  153. }
  154. }
  155. },
  156. memberType: {
  157. validators: {
  158. notEmpty: {
  159. message: 'The gender is required'
  160. }
  161. }
  162. },
  163. bio:{
  164. validators: {
  165. notEmpty: {
  166. message: 'The bio is required and cannot be empty'
  167. },
  168. }
  169. },
  170. phoneNumber: {
  171. validators: {
  172. notEmpty: {
  173. message: 'The phone number is required and cannot be empty'
  174. },
  175. digits: {
  176. message: 'The value can contain only digits'
  177. }
  178. }
  179. },
  180. city:{
  181. validators: {
  182. notEmpty: {
  183. message: 'The city is required and cannot be empty'
  184. },
  185. }
  186. }
  187. }
  188. }).on('status.field.bv', function(e, data) {
  189. var $form = $(e.target),
  190. validator = data.bv,
  191. $collapsePane = data.element.parents('.collapse'),
  192. colId = $collapsePane.attr('id');
  193. if (colId) {
  194. var $anchor = $('a[href="#' + colId + '"][data-toggle="collapse"]');
  195. var $icon = $anchor.find('i');
  196. // Add custom class to panel containing the field
  197. if (data.status == validator.STATUS_INVALID) {
  198. $anchor.addClass('bv-col-error');
  199. $icon.removeClass(faIcon.valid).addClass(faIcon.invalid);
  200. } else if (data.status == validator.STATUS_VALID) {
  201. var isValidCol = validator.isValidContainer($collapsePane);
  202. if (isValidCol) {
  203. $anchor.removeClass('bv-col-error');
  204. }else{
  205. $anchor.addClass('bv-col-error');
  206. }
  207. $icon.removeClass(faIcon.valid + " " + faIcon.invalid).addClass(isValidCol ? faIcon.valid : faIcon.invalid);
  208. }
  209. }
  210. });
  211. // FORM VALIDATION CUSTOM ERROR CONTAINER
  212. // =================================================================
  213. // Indicate where the error messages are shown.
  214. // Tooltip, Popover, Custom Container.
  215. // =================================================================
  216. $('#demo-bv-errorcnt').bootstrapValidator({
  217. message: 'This value is not valid',
  218. excluded: [':disabled'],
  219. feedbackIcons: faIcon,
  220. fields: {
  221. name: {
  222. container: 'tooltip',
  223. validators: {
  224. notEmpty: {
  225. message: 'The first name is required and cannot be empty'
  226. },
  227. regexp: {
  228. regexp: /^[A-Z\s]+$/i,
  229. message: 'The first name can only consist of alphabetical characters and spaces'
  230. }
  231. }
  232. },
  233. lastName: {
  234. validators: {
  235. notEmpty: {
  236. message: 'The last name is required and cannot be empty'
  237. },
  238. regexp: {
  239. regexp: /^[A-Z\s]+$/i,
  240. message: 'The last name can only consist of alphabetical characters and spaces'
  241. }
  242. }
  243. },
  244. email: {
  245. container: 'tooltip',
  246. validators: {
  247. notEmpty: {
  248. message: 'The email address is required and can\'t be empty'
  249. },
  250. emailAddress: {
  251. message: 'The input is not a valid email address'
  252. }
  253. }
  254. },
  255. username: {
  256. container: 'popover',
  257. message: 'The username is not valid',
  258. validators: {
  259. notEmpty: {
  260. message: 'The username is required and cannot be empty'
  261. },
  262. stringLength: {
  263. min: 6,
  264. max: 30,
  265. message: 'The username must be more than 6 and less than 30 characters long'
  266. },
  267. regexp: {
  268. regexp: /^[a-zA-Z0-9_\.]+$/,
  269. message: 'The username can only consist of alphabetical, number, dot and underscore'
  270. },
  271. different: {
  272. field: 'password',
  273. message: 'The username and password cannot be the same as each other'
  274. }
  275. }
  276. },
  277. password: {
  278. container: 'popover',
  279. validators: {
  280. notEmpty: {
  281. message: 'The password is required and cannot be empty'
  282. },
  283. different: {
  284. field: 'username',
  285. message: 'The password cannot be the same as username'
  286. }
  287. }
  288. },
  289. phoneNumber: {
  290. container: '#demo-error-container',
  291. validators: {
  292. notEmpty: {
  293. message: 'The phone number is required and cannot be empty'
  294. },
  295. digits: {
  296. message: 'The value can contain only digits'
  297. }
  298. }
  299. },
  300. city:{
  301. container: '#demo-error-container',
  302. validators: {
  303. notEmpty: {
  304. message: 'The city is required and cannot be empty'
  305. },
  306. }
  307. }
  308. }
  309. }).on('status.field.bv', function(e, data) {
  310. var $form = $(e.target),
  311. validator = data.bv,
  312. $tabPane = data.element.parents('.tab-pane'),
  313. tabId = $tabPane.attr('id');
  314. if (tabId) {
  315. var $icon = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent().find('i');
  316. // Add custom class to tab containing the field
  317. if (data.status == validator.STATUS_INVALID) {
  318. $icon.removeClass(faIcon.valid).addClass(faIcon.invalid);
  319. } else if (data.status == validator.STATUS_VALID) {
  320. var isValidTab = validator.isValidContainer($tabPane);
  321. $icon.removeClass(faIcon.valid).addClass(isValidTab ? faIcon.valid : faIcon.invalid);
  322. }
  323. }
  324. });
  325. // FORM VARIOUS VALIDATION
  326. // =================================================================
  327. $('#demo-bvd-notempty').bootstrapValidator({
  328. message: 'This value is not valid',
  329. feedbackIcons: faIcon,
  330. fields: {
  331. username: {
  332. message: 'The username is not valid',
  333. validators: {
  334. notEmpty: {
  335. message: 'The username is required.'
  336. }
  337. }
  338. },
  339. acceptTerms: {
  340. validators: {
  341. notEmpty: {
  342. message: 'You have to accept the terms and policies'
  343. }
  344. }
  345. },
  346. password: {
  347. validators: {
  348. notEmpty: {
  349. message: 'The password is required and can\'t be empty'
  350. },
  351. identical: {
  352. field: 'confirmPassword',
  353. message: 'The password and its confirm are not the same'
  354. }
  355. }
  356. },
  357. confirmPassword: {
  358. validators: {
  359. notEmpty: {
  360. message: 'The confirm password is required and can\'t be empty'
  361. },
  362. identical: {
  363. field: 'password',
  364. message: 'The password and its confirm are not the same'
  365. }
  366. }
  367. },
  368. member: {
  369. validators: {
  370. notEmpty: {
  371. message: 'The gender is required'
  372. }
  373. }
  374. },
  375. 'programs[]': {
  376. validators: {
  377. choice: {
  378. min: 2,
  379. max: 4,
  380. message: 'Please choose 2 - 4 programming languages you are good at'
  381. }
  382. }
  383. },
  384. integer: {
  385. validators: {
  386. notEmpty: {
  387. message: 'The number is required and can\'t be empty'
  388. },
  389. integer: {
  390. message: 'The value is not a number'
  391. }
  392. }
  393. },
  394. numeric: {
  395. validators: {
  396. notEmpty: {
  397. message: 'The number is required and can\'t be empty'
  398. },
  399. numeric: {
  400. message: 'The value is not a number'
  401. }
  402. }
  403. },
  404. greaterthan: {
  405. validators: {
  406. notEmpty: {
  407. message: 'The number is required and can\'t be empty'
  408. },
  409. greaterThan: {
  410. inclusive:false,
  411. //If true, the input value must be greater than or equal to the comparison one.
  412. //If false, the input value must be greater than the comparison one
  413. value: 50,
  414. message: 'Please enter a value greater than 50'
  415. }
  416. }
  417. },
  418. lessthan: {
  419. validators: {
  420. notEmpty: {
  421. message: 'The number is required and can\'t be empty'
  422. },
  423. lessThan: {
  424. inclusive:false,
  425. //If true, the input value must be less than or equal to the comparison one.
  426. //If false, the input value must be less than the comparison one
  427. value: 25,
  428. message: 'Please enter a value less than 25'
  429. }
  430. }
  431. },
  432. range: {
  433. validators: {
  434. inclusive:true,
  435. notEmpty: {
  436. message: 'The number is required and can\'t be empty'
  437. },
  438. between: {
  439. min:1,
  440. max:100,
  441. message: 'Please enter a number between 1 and 100'
  442. }
  443. }
  444. },
  445. uppercase:{
  446. validators: {
  447. notEmpty: {
  448. message: 'The card holder is required and can\'t be empty'
  449. },
  450. // Since case is a Javascript keyword,
  451. // you should place it between quotes (like 'case' or "case")
  452. // to make it work in all browsers
  453. stringCase: {
  454. message: 'The card holder must be in uppercase',
  455. 'case': 'upper'
  456. }
  457. }
  458. },
  459. email: {
  460. validators: {
  461. notEmpty: {
  462. message: 'The email address is required and can\'t be empty'
  463. },
  464. emailAddress: {
  465. message: 'The input is not a valid email address'
  466. }
  467. }
  468. },
  469. website: {
  470. validators: {
  471. notEmpty: {
  472. message: 'The website address is required and can\'t be empty'
  473. },
  474. uri: {
  475. allowLocal: false,
  476. message: 'The input is not a valid URL'
  477. }
  478. }
  479. },
  480. color: {
  481. validators: {
  482. notEmpty: {
  483. message: 'The hex color is required and can\'t be empty'
  484. },
  485. hexColor: {
  486. message: 'The input is not a valid hex color'
  487. }
  488. }
  489. }
  490. }
  491. }).on('success.field.bv', function(e, data) {
  492. // $(e.target) --> The field element
  493. // data.bv --> The BootstrapValidator instance
  494. // data.field --> The field name
  495. // data.element --> The field element
  496. var $parent = data.element.parents('.form-group');
  497. // Remove the has-success class
  498. $parent.removeClass('has-success');
  499. });
  500. // MASKED INPUT
  501. // =================================================================
  502. // Require Masked Input
  503. // http://digitalbush.com/projects/masked-input-plugin/
  504. // =================================================================
  505. // Initialize Masked Inputs
  506. // a - Represents an alpha character (A-Z,a-z)
  507. // 9 - Represents a numeric character (0-9)
  508. // * - Represents an alphanumeric character (A-Z,a-z,0-9)
  509. $('#demo-msk-date').mask('99/99/9999');
  510. $('#demo-msk-date2').mask('99-99-9999');
  511. $('#demo-msk-phone').mask('(999) 999-9999');
  512. $('#demo-msk-phone-ext').mask('(999) 999-9999? x99999');
  513. $('#demo-msk-taxid').mask('99-9999999');
  514. $('#demo-msk-ssn').mask('999-99-9999');
  515. $('#demo-msk-pkey').mask('a*-999-a999');
  516. });