Membuat form validation menggunakan jQuery
Nama : Bimantara Tito Wahyudi
NRP : 5025201227
Kelas : PWEB B
NRP : 5025201227
Kelas : PWEB B
Pada materi ini, kami belajar tentang jQuery validation yang sangat memudahkan kita ketika ingin membuat form. Berikut adalah halaman web yang telah saya buat:
Berikut adalah source codenya:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pendataan Mahasiswa</title> | |
| <link rel="stylesheet" href="index.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="card"> | |
| <h1><center>PENDATAAN</br>MAHASISWA SAKIT MENTAL</center></h1> | |
| <form id="indform"> | |
| <div class="formcard"> | |
| <label for="nim" class="labelfrm">NIM </label> | |
| <input class="required" type="text" name="nim" id="nim" maxlength="10" size="15"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="nama" class="labelfrm">NAMA </label> | |
| <input class="required" type="text" name="nama" id="nama" size="30"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="alamat" class="labelfrm">ALAMAT </label> | |
| <textarea class="required" name="alamat" id="alamat" rows="2"></textarea> | |
| </div> | |
| <div class="formcard"> | |
| <label for="tgl" class="labelfrm">TANGGAL LAHIR </label> | |
| <input class="required" type="text" name="tgl" id="tgl" maxlength="10" size="15"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="umur" class="labelfrm">UMUR </label> | |
| <input class="required" type="text" name="umur" id="umur" maxlength="3" size="7"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="email" class="labelfrm">ALAMAT EMAIL </label> | |
| <input class="required" type="text" name="email" id="email" size="50"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="situs" class="labelfrm">ALAMAT SITUS </label> | |
| <input class="required" type="text" name="situs" id="situs" size="50"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="pass1" class="labelfrm">PASSWORD </label> | |
| <input class="required" type="password" name="pass1" id="pass1" size="15"/> | |
| </div> | |
| <div class="formcard"> | |
| <label for="pass2" class="labelfrm">ULANGI PASSWORD </label> | |
| <input class="required" type="password" name="pass2" id="pass2" size="15"/> | |
| </div> | |
| <div class="formcard-submit"> | |
| <label for="submit" class="labelfrm"> </label> | |
| <input type="submit" name="Submit" value="Login"/> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| $('#indform').validate({ | |
| rules: { | |
| nim : { | |
| digits: true, | |
| minlength: 10, | |
| maxlength: 10 | |
| }, | |
| tgl: { | |
| indonesianDate: true | |
| }, | |
| umur: { | |
| digits: true, | |
| range: [1, 100] | |
| }, | |
| email: { | |
| email: true | |
| }, | |
| situs: { | |
| url: true | |
| }, | |
| pass2: { | |
| equalTo: "#pass1" | |
| } | |
| } | |
| }); | |
| $.validator.addMethod( | |
| "indonesianDate", | |
| function(value, element) { | |
| return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); | |
| }, | |
| "Please enter a date in the format DD/MM/YYYY" | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Fonts */ | |
| @font-face { | |
| font-family: 'open_sansregular'; | |
| src: url('opensans-regular-webfont.woff2') format('woff2'), | |
| url('opensans-regular-webfont.woff') format('woff'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* CSS Reset */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-style: normal; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* Custom CSS */ | |
| * { | |
| font-family: sans-serif; | |
| } | |
| body { | |
| background-color: lightgrey; | |
| } | |
| .container { | |
| align-items: center; | |
| display: flex; | |
| justify-content: center; | |
| min-height: 100vh; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .card { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| -webkit-backdrop-filter: blur(5px); | |
| backdrop-filter: blur(5px); | |
| background-color: whitesmoke; | |
| border-radius: 3rem; | |
| margin: 5em 24em; | |
| padding: 3em 3em; | |
| width: 100%; | |
| } | |
| h1 { | |
| font-size: 40px; | |
| margin-bottom: 1em; | |
| } | |
| /* form { | |
| display: flex; | |
| /* background-color: aqua; */ | |
| /* height: 100%; | |
| width: 100%; | |
| } */ | |
| .formcard { | |
| padding: 0.5em 0; | |
| } | |
| .formcard-submit { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| padding: 0.5em 0; | |
| } | |
| .card2 { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| /* justify-content: center; */ | |
| /* background-color: wheat; */ | |
| margin: 0 1em; | |
| padding: 2.5em 0; | |
| height: auto; | |
| width: 50%; | |
| } | |
| .form-control { | |
| display:flex; | |
| flex-direction: column; | |
| text-align: left; | |
| height: fit-content; | |
| width: 100%; | |
| margin-bottom: 25px; | |
| } | |
| label, input, select{ | |
| display:flex; | |
| margin-bottom: 0.5em; | |
| } | |
| label { | |
| color: gray; | |
| font-size: medium; | |
| font-weight: bolder; | |
| } | |
| .formcard input, .formcard textarea{ | |
| padding: 0 0.5em; | |
| border-radius: 8px; | |
| font-size: large; | |
| font-weight: bold; | |
| height: 30px; | |
| border: 1px solid lightgray; | |
| width: 100%; | |
| } | |
| .formcard textarea { | |
| padding: 0.5em 0.5em; | |
| height: auto; | |
| } | |
| select { | |
| height: 32px; | |
| } | |
| .formcard-submit input { | |
| justify-content: center; | |
| border: none; | |
| background-color: rgb(70, 255, 70); | |
| color: whitesmoke; | |
| border-radius: 8px; | |
| font-size: large; | |
| font-weight: bold; | |
| height: 35px; | |
| width: 120px; | |
| } | |
| .formcard-submit input:hover{ | |
| cursor:pointer; | |
| background-color: rgb(117, 255, 117); | |
| } | |
| .form-control-button { | |
| display:flex; | |
| justify-content: end; | |
| align-items: flex-end; | |
| flex-direction: column; | |
| text-align: left; | |
| height: fit-content; | |
| width: 100%; | |
| margin-top: 200px; | |
| margin-bottom: 25px; | |
| } | |
| label.error { | |
| color: #ff4655; | |
| } |
Link
Comments
Post a Comment