PageRenderTime 40ms CodeModel.GetById 13ms RepoModel.GetById 1ms app.codeStats 0ms

/assets/vendors/bootstrapvalidator/demo/choice.html

https://gitlab.com/cepjeff/frontend_shared
HTML | 128 lines | 122 code | 6 blank | 0 comment | 0 complexity | 8f421cf1480e10c9a499f704a53dffe8 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <title>BootstrapValidator demo</title>
    5. 

  5. 

  6.     <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    7. 

  7.     <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
    8. 

  8. 

  9.     <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
    10. 

  10.     <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    11. 

  11.     <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

  14.     <div class="container">
    15. 

  15.         <div class="row">
    16. 

  16.             <section>
    17. 

  17.                 <div class="col-lg-8 col-lg-offset-2">
    18. 

  18.                     <div class="page-header">
    19. 

  19.                         <h2>choice validator</h2>
    20. 

  20.                     </div>
    21. 

  21. 

  22.                     <form id="interviewForm" method="post" class="form-horizontal" action="target.php">
    23. 

  23.                         <div class="form-group">
    24. 

  24.                             <label class="col-lg-3 control-label">Programming Languages</label>
    25. 

  25.                             <div class="col-lg-4">
    26. 

  26.                                 <div class="checkbox">
    27. 

  27.                                     <label>
    28. 

  28.                                         <input type="checkbox" name="languages[]" value="net" /> .Net
    29. 

  29.                                     </label>
    30. 

  30.                                 </div>
    31. 

  31.                                 <div class="checkbox">
    32. 

  32.                                     <label>
    33. 

  33.                                         <input type="checkbox" name="languages[]" value="java" /> Java
    34. 

  34.                                     </label>
    35. 

  35.                                 </div>
    36. 

  36.                                 <div class="checkbox">
    37. 

  37.                                     <label>
    38. 

  38.                                         <input type="checkbox" name="languages[]" value="c" /> C/C++
    39. 

  39.                                     </label>
    40. 

  40.                                 </div>
    41. 

  41.                                 <div class="checkbox">
    42. 

  42.                                     <label>
    43. 

  43.                                         <input type="checkbox" name="languages[]" value="php" /> PHP
    44. 

  44.                                     </label>
    45. 

  45.                                 </div>
    46. 

  46.                                 <div class="checkbox">
    47. 

  47.                                     <label>
    48. 

  48.                                         <input type="checkbox" name="languages[]" value="perl" /> Perl
    49. 

  49.                                     </label>
    50. 

  50.                                 </div>
    51. 

  51.                                 <div class="checkbox">
    52. 

  52.                                     <label>
    53. 

  53.                                         <input type="checkbox" name="languages[]" value="ruby" /> Ruby
    54. 

  54.                                     </label>
    55. 

  55.                                 </div>
    56. 

  56.                                 <div class="checkbox">
    57. 

  57.                                     <label>
    58. 

  58.                                         <input type="checkbox" name="languages[]" value="python" /> Python
    59. 

  59.                                     </label>
    60. 

  60.                                 </div>
    61. 

  61.                                 <div class="checkbox">
    62. 

  62.                                     <label>
    63. 

  63.                                         <input type="checkbox" name="languages[]" value="javascript" /> Javascript
    64. 

  64.                                     </label>
    65. 

  65.                                 </div>
    66. 

  66.                             </div>
    67. 

  67.                         </div>
    68. 

  68. 

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

  70.                             <label class="col-lg-3 control-label">Editors</label>
    71. 

  71.                             <div class="col-lg-4">
    72. 

  72.                                 <select class="form-control" name="editors[]" multiple="multiple" style="height: 200px;">
    73. 

  73.                                     <option value="" disabled>Choose 2 - 3 editors</option>
    74. 

  74.                                     <option value="atom">Atom</option>
    75. 

  75.                                     <option value="eclipse">Eclipse</option>
    76. 

  76.                                     <option value="netbeen">NetBean</option>
    77. 

  77.                                     <option value="nodepadplusplus">Nodepad++</option>
    78. 

  78.                                     <option value="phpstorm">PHP Storm</option>
    79. 

  79.                                     <option value="sublime">Sublime</option>
    80. 

  80.                                     <option value="webstorm">Web Storm</option>
    81. 

  81.                                 </select>
    82. 

  82.                             </div>
    83. 

  83.                         </div>
    84. 

  84. 

  85.                         <div class="form-group">
    86. 

  86.                             <div class="col-lg-9 col-lg-offset-3">
    87. 

  87.                                 <button type="submit" class="btn btn-primary">Submit</button>
    88. 

  88.                             </div>
    89. 

  89.                         </div>
    90. 

  90.                     </form>
    91. 

  91.                 </div>
    92. 

  92.             </section>
    93. 

  93.         </div>
    94. 

  94.     </div>
    95. 

  95. 

  96. <script type="text/javascript">
    97. 

  97. $(document).ready(function() {
    98. 

  98.     $('#interviewForm').bootstrapValidator({
    99. 

  99.         feedbackIcons: {
    100. 

  100.             valid: 'glyphicon glyphicon-ok',
    101. 

  101.             invalid: 'glyphicon glyphicon-remove',
    102. 

  102.             validating: 'glyphicon glyphicon-refresh'
    103. 

  103.         },
    104. 

  104.         fields: {
    105. 

  105.             'languages[]': {
    106. 

  106.                 validators: {
    107. 

  107.                     choice: {
    108. 

  108.                         min: 2,
    109. 

  109.                         max: 4,
    110. 

  110.                         message: 'Please choose 2 - 4 programming languages you are good at'
    111. 

  111.                     }
    112. 

  112.                 }
    113. 

  113.             },
    114. 

  114.             'editors[]': {
    115. 

  115.                 validators: {
    116. 

  116.                     choice: {
    117. 

  117.                         min: 2,
    118. 

  118.                         max: 3,
    119. 

  119.                         message: 'Please choose 2 - 3 editors you know'
    120. 

  120.                     }
    121. 

  121.                 }
    122. 

  122.             }
    123. 

  123.         }
    124. 

  124.     });
    125. 

  125. });
    126. 

  126. </script>
    127. 

  127. </body>
    128. 

  128. </html>
    129.