Advertisement
Dr_U

inputForm

Dec 20th, 2021
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.57 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Latihan Jquery</title>
  8.  
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous">
  10.  
  11. <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
  13.  
  14. <style type="text/css">
  15. .label{
  16. display: block;
  17. font-size: small;
  18. margin-top: 5px;
  19. }.error{font-size: small;color:rgb(255, 0, 0);}
  20.  
  21. body{
  22. width: fit-content;
  23. margin: auto;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <h1 style="text-align: center;">
  29. INPUT DATA MAHASISWA
  30. </h1>
  31.  
  32. <form id="frs-mhs">
  33. <label for="nim" class="labelfrm">NIM </label>
  34. <input type="text" name="nim" id="nim" maxlength="10" size="15" class="required"/>
  35.  
  36. <label for="nama" class="labelfrm">NAMA </label>
  37. <input type="text" name="nama" id="nama" size="30"/>
  38.  
  39. <label for="alamat" class="labelfrm">ALAMAT </label>
  40. <textarea name="alamat" id="alamat" cols="40" rows="4"></textarea>
  41.  
  42. <label for="tgl" class="labelfrm">TANGGAL LAHIR </label>
  43. <input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>
  44.  
  45. <label for="umur" class="labelfrm">UMUR </label>
  46. <input type="text" name="umur" id="umur" maxlength="3" size="7"/>
  47.  
  48. <label for="email" class="labelfrm">ALAMAT EMAIL </label>
  49. <input type="text" name="email" id="email" size="50"/>
  50.  
  51. <label for="situs" class="labelfrm">ALAMAT SITUS </label>
  52. <input type="text" name="situs" id="situs" size="50"/>
  53.  
  54. <label for="pass1" class="labelfrm">PASSWORD </label>
  55. <input type="password" name="pass1" id="pass1" size="15"/>
  56.  
  57. <label for="pass2" class="labelfrm">ULANGI PASSWORD </label>
  58. <input type="password" name="pass2" id="pass2" size="15"/>
  59.  
  60. <label for="submit" class="labelfrm">&nbsp;</label>
  61. <input type="submit" name="Submit" value="Submit"/>
  62.  
  63. </form>
  64.  
  65. <script>
  66. $(document).ready(function(){
  67. jQuery.validator.setDefaults({
  68. debug: true,
  69. success: "valid"
  70. });
  71. $( "#frs-mhs" ).validate({
  72. rules: {
  73. nim: {
  74. required: true,
  75. digits: true
  76. },
  77. nama:{
  78. required: true
  79. },
  80. alamat:{
  81. required: true,
  82. },
  83. tanggal:{
  84. required: true,
  85. date: true, //deprecated
  86. dateFormat: 'dd-mm-yyyy'
  87. },
  88. umur:{
  89. required: true,
  90. number:true
  91. },
  92. email:{
  93. required: true,
  94. email: true
  95. },
  96. situs:{
  97. required: false,
  98. url: true
  99. },
  100. pass1:{
  101. required: true,
  102. },
  103. pass2:{
  104. required: true,
  105. }
  106. }
  107. });
  108. });
  109. </script>
  110.  
  111. </body>
  112. </html>
  113.  
  114.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement