PageRenderTime 67ms CodeModel.GetById 31ms RepoModel.GetById 0ms app.codeStats 0ms

/ajax/libs/jquery-form-validator/2.1.47/form-test.html

https://gitlab.com/Blueprint-Marketing/cdnjs
HTML | 346 lines | 304 code | 42 blank | 0 comment | 0 complexity | 40e533f16e1b4340b46e164618957da9 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8" />
    5. 

  5.     <title>Form Test</title>
    6. 

  6.     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" />
    7. 

  7.     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" />
    8. 

  8.     <style>
    9. 

  9. 

  10.         /* Form and inputs */
    11. 

  11.         form {
    12. 

  12.             width: 500px;
    13. 

  13.             margin: 0 auto;
    14. 

  14.             padding: 20px;
    15. 

  15.             display: block;
    16. 

  16.         }
    17. 

  17. 

  18.         input.form-control {
    19. 

  19.             width: 375px;
    20. 

  20.         }
    21. 

  21. 

  22.         /* While server is being requested */
    23. 

  23.         form.validating-server-side {
    24. 

  24.             background: #F2F2F2;
    25. 

  25.         }
    26. 

  26. 

  27.         input.validating-server-side {
    28. 

  28.             opacity: 0.5;
    29. 

  29.             background: lightgoldenrodyellow;
    30. 

  30.         }
    31. 

  31. 

  32.         /* modify inputs for password strength */
    33. 

  33.         .password-strength input.form-control {
    34. 

  34.             width: 375px;
    35. 

  35.             margin-right: 4px;
    36. 

  36.             display: inline;
    37. 

  37.         }
    38. 

  38. 

  39.         .password-strength label {
    40. 

  40.             display: block;
    41. 

  41.         }
    42. 

  42. 

  43.         /* Checkboxes */
    44. 

  44.         .form-group.check-boxes input {
    45. 

  45.             margin-left: 10px;
    46. 

  46.         }
    47. 

  47. 

  48.         span.help {
    49. 

  49.             color: #999 !important;
    50. 

  50.         }
    51. 

  51. 

  52.         /* Error container for form C */
    53. 

  53. 

  54.         #error-container div {
    55. 

  55.             color: red;
    56. 

  56.             line-height: 140%;
    57. 

  57.         }
    58. 

  58. 

  59.         #error-container div:last-child {
    60. 

  60.             padding-bottom: 10px;
    61. 

  61.         }
    62. 

  62. 

  63.     </style>
    64. 

  64. </head>
    65. 

  65. <body>
    66. 

  66. <div>
    67. 

  67.     <form action="" id="form-a" role="form">
    68. 

  68.         <div class="form-group">
    69. 

  69.             <label class="control-label" for="inline-suggestions">Inline suggestions</label>
    70. 

  70.             <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Fox, Tiger, Elephant" />
    71. 

  71.         </div>
    72. 

  72. 

  73.         <div class="form-group">
    74. 

  74.             <label class="control-label" for="country-suggestions">Country suggestions</label>
    75. 

  75.             <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" />
    76. 

  76.         </div>
    77. 

  77. 

  78.         <div class="form-group">
    79. 

  79.             <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
    80. 

  80.             <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" />
    81. 

  81.         </div>
    82. 

  82. 

  83.         <div class="form-group">
    84. 

  84.             <label class="control-label">Year</label>
    85. 

  85.             <input name="birth" class="form-control"
    86. 

  86.                    data-validation="date"
    87. 

  87.                    data-validation-format="yyyy-mm-dd"
    88. 

  88.                    data-suggestions="2014-01-15,2014-01-16,2014-01-17" />
    89. 

  89.         </div>
    90. 

  90. 

  91.         <div class="form-group">
    92. 

  92.             <label class="control-label">Datepicker</label>
    93. 

  93.             <input name="birth2" class="form-control"
    94. 

  94.                    data-validation="date"
    95. 

  95.                    data-validation-format="mm/dd/yyyy"
    96. 

  96.                    id="datepicker" />
    97. 

  97.         </div>
    98. 

  98. 

  99.         <div class="form-group">
    100. 

  100.             <label class="control-label">Number 0-10 (accepting floats)</label>
    101. 

  101.             <input name="floats" class="form-control"
    102. 

  102.                    data-validation="number"
    103. 

  103.                    data-validation-allowing="range[0;10], float"
    104. 

  104.                    data-validation-decimal-separator=","
    105. 

  105.                     />
    106. 

  106.         </div>
    107. 

  107. 

  108.         <div class="form-group password-strength">
    109. 

  109.             <label class="control-label" for="password">Display password strength (only strong)</label>
    110. 

  110.             <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" />
    111. 

  111.         </div>
    112. 

  112. 

  113.         <div class="form-group">
    114. 

  114.             <label class="control-label">Alphanumeric and -_ and spaces</label>
    115. 

  115.             <input name="alphanumeric with spaces" class="form-control" name="test" data-validation="alphanumeric" data-validation-allowing="-_ " />
    116. 

  116.         </div>
    117. 

  117. 

  118.         <div class="form-group">
    119. 

  119.             <label class="control-label">Alphanumeric only</label>
    120. 

  120.             <input name="aplhanumeric only" class="form-control" name="test2" data-validation="alphanumeric" />
    121. 

  121.         </div>
    122. 

  122. 

  123.         <div class="checkbox">
    124. 

  124.             <label>
    125. 

  125.                 <input name="checkbox" type="checkbox" data-validation="required" /> Must be checked
    126. 

  126.             </label>
    127. 

  127.         </div>
    128. 

  128. 

  129.         <div class="form-group">
    130. 

  130.             <label class="control-label">Even numbers only</label>
    131. 

  131.             <input name="even numbers" class="form-control" name="test4" data-validation="even_number" />
    132. 

  132.         </div>
    133. 

  133. 

  134.         <div class="form-group">
    135. 

  135.             <label class="control-label">Make a choice</label>
    136. 

  136.             <br />
    137. 

  137.             <select name="choice" data-validation="required" data-validation-error-msg="Please make a choice">
    138. 

  138.                 <option value="">- - Choose - -</option>
    139. 

  139.                 <option>A</option>
    140. 

  140.                 <option>B</option>
    141. 

  141.                 <option>C</option>
    142. 

  142.                 <option>D</option>
    143. 

  143.             </select>
    144. 

  144.         </div>
    145. 

  145. 

  146.         <div class="form-group">
    147. 

  147.             <label class="control-label">Text</label>
    148. 

  148.             (<span id="max-len">20</span> chars left)<br />
    149. 

  149.             <textarea id="text-area" class="form-control" name="some-text"></textarea>
    150. 

  150.         </div>
    151. 

  151. 

  152.         <div class="form-group">
    153. 

  153.             <label class="control-label">Server validation</label>
    154. 

  154.             <input class="form-control" name="code"
    155. 

  155.                    data-validation-help="The word is &quot;secret&quot;"
    156. 

  156.                    data-validation="alphanumeric server"
    157. 

  157.                    data-validation-url="http://formvalidator.net/validate-email.php" />
    158. 

  158.         </div>
    159. 

  159. 

  160.         <div class="form-group">
    161. 

  161.             <label class="control-label">File validation</label>
    162. 

  162.             <input type="file" name="some-file1" class="form-control"
    163. 

  163.                    data-validation="size mime required"
    164. 

  164.                    data-validation-error-msg="You must upload an image file"
    165. 

  165.                    data-validation-allowing="jpg, png, ico"
    166. 

  166.                    data-validation-max-size="100kb" />
    167. 

  167.         </div>
    168. 

  168. 

  169.         <div class="form-group">
    170. 

  170.             <label class="control-label">File validation (multiple)</label>
    171. 

  171.             <input type="file" multiple="multiple" name="some-file2" class="form-control"
    172. 

  172.                    data-validation="size mime required length"
    173. 

  173.                    data-validation-length="min2"
    174. 

  174.                    data-validation-error-msg="You must upload at least two image files"
    175. 

  175.                    data-validation-allowing="jpg, png, ico"
    176. 

  176.                    data-validation-max-size="100kb" />
    177. 

  177.         </div>
    178. 

  178. 

  179.         <div class="form-group">
    180. 

  180.             <label class="control-label">
    181. 

  181.                 Callback validation, set this value to &quot;1&quot; and
    182. 

  182.                 validation will fail
    183. 

  183.             </label>
    184. 

  184.             <input id="callback" class="form-control" />
    185. 

  185.         </div>
    186. 

  186. 

  187.         <div class="form-group check-boxes">
    188. 

  188.             <label>Checkbox group</label><br />
    189. 

  189.             <label>
    190. 

  190.                 <input type="checkbox" name="box" value="1"
    191. 

  191.                        data-validation="checkbox_group"
    192. 

  192.                        data-validation-qty="1-2" /> 1
    193. 

  193.             </label>
    194. 

  194.             <label>
    195. 

  195.                 <input type="checkbox" name="box" value="2" /> 2
    196. 

  196.             </label>
    197. 

  197.             <label>
    198. 

  198.                 <input type="checkbox" name="box" value="3" /> 3
    199. 

  199.             </label>
    200. 

  200.             <label>
    201. 

  201.                 <input type="checkbox" name="box" value="4" /> 4
    202. 

  202.             </label>
    203. 

  203.             <label>
    204. 

  204.                 <input type="checkbox" name="box" value="5" /> 5
    205. 

  205.             </label>
    206. 

  206.         </div>
    207. 

  207.         <p>
    208. 

  208.             <input type="submit" class="button">
    209. 

  209.             <input type="reset" class="button">
    210. 

  210.         </p>
    211. 

  211.     </form>
    212. 

  212.     <hr />
    213. 

  213.     <form id="form-b">
    214. 

  214.         <div class="form-group">
    215. 

  215.             <label class="control-label">Test</label>
    216. 

  216.             <input name="test" data-validation="number" type="text" />
    217. 

  217.         </div>
    218. 

  218.         <p>
    219. 

  219.             <input type="submit" class="button">
    220. 

  220.             <input type="reset" class="button">
    221. 

  221.         </p>
    222. 

  222.     </form>
    223. 

  223.     <hr />
    224. 

  224.     <form id="form-c">
    225. 

  225.         <div class="form-group">
    226. 

  226.             <label class="control-label">Country</label>
    227. 

  227.             <input name="test" data-validation="country" data-validation-error-msg="No valid country given" />
    228. 

  228.         </div>
    229. 

  229.         <div class="form-group">
    230. 

  230.             <label class="control-label">E-mail</label>
    231. 

  231.             <input name="test" data-validation="email" data-validation-error-msg="E-mail is not valid" />
    232. 

  232.         </div>
    233. 

  233.         <div class="form-group">
    234. 

  234.             <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label>
    235. 

  235.             <input name="test2"
    236. 

  236.                     data-validation="alphanumeric"
    237. 

  237.                     data-validation-error-msg="Invalid..."
    238. 

  238.                     data-validation-if-checked="checker" />
    239. 

  239.             <br />
    240. 

  240.             <input type="checkbox" name="checker" />
    241. 

  241.         </div>
    242. 

  242.         <div id="error-container">
    243. 

  243. 

  244.         </div>
    245. 

  245.         <p>
    246. 

  246.             <input type="submit" class="button">
    247. 

  247.             <input type="reset" class="button">
    248. 

  248.         </p>
    249. 

  249.     </form>
    250. 

  250. </div>
    251. 

  251. <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    252. 

  252. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    253. 

  253. <script src="jquery.form-validator.js"></script>
    254. 

  254. <script>
    255. 

  255. (function($, window) {
    256. 

  256. 

  257.     var dev = window.location.hash.indexOf('dev') > -1 ? '.dev' : '';
    258. 

  258. 

  259.     // setup datepicker
    260. 

  260.     $("#datepicker").datepicker();
    261. 

  261. 

  262.     // Add a new validator
    263. 

  263.     $.formUtils.addValidator({
    264. 

  264.         name : 'even_number',
    265. 

  265.         validatorFunction : function(value, $el, config, language, $form) {
    266. 

  266.             return parseInt(value, 10) % 2 === 0;
    267. 

  267.         },
    268. 

  268.         borderColorOnError : '',
    269. 

  269.         errorMessage : 'You have to give an even number',
    270. 

  270.         errorMessageKey: 'badEvenNumber'
    271. 

  271.     });
    272. 

  272. 

  273.     window.applyValidation = function(validateOnBlur, forms, messagePosition) {
    274. 

  274.         if( !forms )
    275. 

  275.             forms = 'form';
    276. 

  276.         if( !messagePosition )
    277. 

  277.             messagePosition = 'top';
    278. 

  278. 

  279.         $.validate({
    280. 

  280.             form : forms,
    281. 

  281.             language : {
    282. 

  282.                 requiredFields: 'Du måste bocka för denna'
    283. 

  283.             },
    284. 

  284.             validateOnBlur : validateOnBlur,
    285. 

  285.             errorMessagePosition : messagePosition,
    286. 

  286.             scrollToTopOnError : true,
    287. 

  287.             borderColorOnError : 'purple',
    288. 

  288.             modules : 'security'+dev+', location'+dev+', sweden'+dev+', file'+dev+', uk'+dev,
    289. 

  289.             onModulesLoaded: function() {
    290. 

  290.                 $('#country-suggestions').suggestCountry();
    291. 

  291.                 $('#swedish-county-suggestions').suggestSwedishCounty();
    292. 

  292.                 $('#password').displayPasswordStrength();
    293. 

  293.             },
    294. 

  294.             onValidate : function($f) {
    295. 

  295. 

  296.                 console.log('about to validate form '+$f.attr('id'));
    297. 

  297. 

  298.                 var $callbackInput = $('#callback');
    299. 

  299.                 if( $callbackInput.val() == 1 ) {
    300. 

  300.                     return {
    301. 

  301.                         element : $callbackInput,
    302. 

  302.                         message : 'This validation was made in a callback'
    303. 

  303.                     };
    304. 

  304.                 }
    305. 

  305.             },
    306. 

  306.             onError : function($form) {
    307. 

  307.                 if( !$.formUtils.haltValidation ) {
    308. 

  308.                     alert('Invalid '+$form.attr('id'));
    309. 

  309.                 }
    310. 

  310.             },
    311. 

  311.             onSuccess : function($form) {
    312. 

  312.                 alert('Valid '+$form.attr('id'));
    313. 

  313.                 return false;
    314. 

  314.             }
    315. 

  315.         });
    316. 

  316.     };
    317. 

  317. 

  318.     $('#text-area').restrictLength($('#max-len'));
    319. 

  319. 

  320.     window.applyValidation(true, '#form-a', 'element');
    321. 

  321.     window.applyValidation(false, '#form-b', 'element');
    322. 

  322.     window.applyValidation(true, '#form-c', $('#error-container'));
    323. 

  323. 

  324.     // Load one module outside $.validate() even though you do not have to
    325. 

  325.     $.formUtils.loadModules('date'+dev+'.js', false, false);
    326. 

  326. 

  327.     $('input')
    328. 

  328.         .on('beforeValidation', function() {
    329. 

  329.             console.log('About to validate input "'+this.name+'"');
    330. 

  330.         })
    331. 

  331.         .on('validation', function(evt, isValid) {
    332. 

  332.             var validationResult = '';
    333. 

  333.             if( isValid === null ) {
    334. 

  334.                 validationResult = 'not validated';
    335. 

  335.             } else if( isValid ) {
    336. 

  336.                 validationResult = 'VALID';
    337. 

  337.             } else {
    338. 

  338.                 validationResult = 'INVALID';
    339. 

  339.             }
    340. 

  340.             console.log('Input '+this.name+' is '+validationResult);
    341. 

  341.         });
    342. 

  342. 

  343. })(jQuery, window);
    344. 

  344. </script>
    345. 

  345. <body>
    346. 

  346. </html>
    347.