PWEB: JQuery
Rabu, 12 Oktober 2022
Dokumentasi:
Link Repository: Klik Di Sini!
Source Code
- Index.html
- proses.php
- JQuery -- Library yang diperlukan ada 2 (dua) yaitu library core JQuery yang dapat didownload di situs http://code.jquery.com dan plugin JQuery Validation yang dapat didownload dari situs resminya di http://bassistance.de/jquery-plugins/jquery-plugin-validation/. Untuk menyertakan library tersebut ke dalam form yang sudah kita buat sebelumnya, tambahkan dua baris perintah berikut ini di antara tag <head> (diasumsikan bahwa kedua plugin tersimpan di folder /jquery).
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
| <html> | |
| <head> | |
| <title>Validasi Form dengan JQuery Validation</title> | |
| <style type="text/css"> | |
| body{ | |
| max-width:fit-content; | |
| margin: auto; | |
| background-color:#433F30; | |
| } | |
| .labelfrm { | |
| display:block; | |
| font-size:medium; | |
| font-weight: bold; | |
| margin-top:10px; | |
| margin-bottom: 5px; | |
| font-family: Arial, Helvetica, sans-serif; | |
| color: #B9B89A; | |
| } | |
| .error { | |
| font-size:small; | |
| color:rgb(227, 182, 182); | |
| font-family: Arial, Helvetica, sans-serif; | |
| margin-left: 5px; | |
| } | |
| h1{ | |
| color: #B9B89A; | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| </style> | |
| <script type="text/javascript" src="jquery/jquery.min.js"></script> | |
| <script type="text/javascript" src="jquery/jquery.validate.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| $('#frm-mhs').validate({ | |
| rules: { | |
| nim : { | |
| digits: true, | |
| minlength:10, | |
| maxlength:10 | |
| }, | |
| tgl: { | |
| indonesianDate:true | |
| }, | |
| umur: { | |
| digits: true, | |
| range: [0, 100] | |
| }, | |
| email: { | |
| email: true | |
| }, | |
| situs: { | |
| url: true | |
| }, | |
| pass2: { | |
| equalTo: "#pass1" | |
| } | |
| }, | |
| messages: { | |
| nim: { | |
| required: "Kolom NIM harus diisi", | |
| minlength: "Kolom NIM harus terdiri dari 10 digit", | |
| maxlength: "Kolom NIM harus terdiri dari 10 digit" | |
| }, | |
| email: { | |
| required: "Alamat email harus diisi", | |
| email: "Format email tidak valid" | |
| }, | |
| pass2: { | |
| equalTo: "Password tidak sama" | |
| } | |
| } | |
| }); | |
| }); | |
| $.validator.addMethod( | |
| "indonesianDate", | |
| function(value, element) { | |
| // put your own logic here, this is just a (crappy) example | |
| return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); | |
| }, | |
| "Please enter a date in the format DD/MM/YYYY" | |
| ); | |
| </script> | |
| </head> | |
| <body> | |
| <br> | |
| <h1>Input Data Mahasiswa</h1> | |
| <form action="proses.php" method="post" id="frm-mhs"> | |
| <label for="nim" class="labelfrm">NIM: </label> | |
| <input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/> | |
| <label for="nama" class="labelfrm">NAMA: </label> | |
| <input type="text" name="nama" id="nama" size="30" class="required"/> | |
| <label for="alamat" class="labelfrm">ALAMAT: </label> | |
| <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea> | |
| <label for="tgl" class="labelfrm">TANGGAL LAHIR: </label> | |
| <input type="text" name="tgl" id="tgl" maxlength="10" size="15" class="required"/> | |
| <label for="umur" class="labelfrm">UMUR: </label> | |
| <input type="text" name="umur" id="umur" maxlength="3" size="7" class="required"/> | |
| <label for="email" class="labelfrm">ALAMAT EMAIL: </label> | |
| <input type="text" name="email" id="email" size="50" class="required"/> | |
| <label for="situs" class="labelfrm">ALAMAT SITUS: </label> | |
| <input type="text" name="situs" id="situs" size="50" class="required"/> | |
| <label for="pass1" class="labelfrm">PASSWORD: </label> | |
| <input type="password" name="pass1" id="pass1" size="15" class="required"/> | |
| <label for="pass2" class="labelfrm">ULANGI PASSWORD: </label> | |
| <input type="password" name="pass2" id="pass2" size="15" class="required"/> | |
| <label for="submit" class="labelfrm"> </label> | |
| <input type="submit" name="Submit" value="Submit"/> | |
| </form> | |
| </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
| <?php | |
| if (isset($_POST['Submit'])) { | |
| echo "<pre>"; | |
| print_r($_POST); | |
| echo "</pre>"; | |
| } | |
| ?> |
5025201272
PWEB C
Comments
Post a Comment