PWEB B - Tugas 6 - Membuat Form Validasi Menggunakan HTML, Java Script dan JQuery
Nama : Nurhalimah
NRP : 5998221015
Kelas : Pemograman Web B
Tahun : 2022
Link : Website (https://halimochy.github.io/pweb-b_validation-form/)
Repository (https://github.com/halimochy/pweb-b_validation-form)
File mencakup folder (jquery), index.html dan proses.php
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> | |
| <title>Validation Form</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| <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: { | |
| nrp : { | |
| digits: true, | |
| minlength:10, | |
| maxlength:10 | |
| }, | |
| umur: { | |
| digits: true, | |
| range: [0, 100] | |
| }, | |
| email: { | |
| email: true | |
| }, | |
| pass2: { | |
| equalTo: "#pass1" | |
| } | |
| }, | |
| messages: { | |
| nrp: { | |
| required: "Kolom nrp 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" | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| </head> | |
| <body> | |
| <center> | |
| <hr color="black"> | |
| <h2>DATA MAHASISWA</h2> | |
| <hr color="black"> | |
| </center> | |
| <div class="container"> | |
| <form name="frm-mhs" id="frm-mhs" action="proses.php" method="post" onsubmit="return validateForm()"> | |
| <div class="form-group"> | |
| <label>NRP</label> | |
| <input type="text" name="nrp" id="nrp" placeholder="NRP Mahasiswa" class="form-control" required maxlength="10" minlength="10"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Nama</label> | |
| <input type="text" name="nama" id="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Alamat</label> | |
| <input type="text" name="alamat" id="alamat" placeholder="Alamat lengkap" class="form-control" required maxlength="50" minlength="3"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Tanggal Lahir</label> | |
| <input type="date" name="tgl" id="tgl" placeholder="mm/dd/yyyy" class="form-control" required maxlength="10" minlength="10"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Umur</label> | |
| <input type="number" name="umur" id="umur" placeholder="Umur Anda" class="form-control" required maxlength="2" minlength="1"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Email</label> | |
| <input type="email" name="email" id="email" placeholder="Email Aktif" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Password</label> | |
| <input type="password" name="pass1" id="pass1" placeholder="Masukkan Password" class="form-control" required maxlength="15" minlength="3"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Konfirmasi Password</label> | |
| <input type="password" name="pass2" id="pass2" placeholder="Ulangi Password" class="form-control" required maxlength="15" minlength="3"> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Submit</button> | |
| </form> | |
| </div> | |
| <script> | |
| function validateForm() { | |
| if (document.forms["frm-mhs"]["nrp"].value == "") { | |
| alert("NRP Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["nrp"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["nama"].value == "") { | |
| alert("Nama Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["nama"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["alamat"].value == "") { | |
| alert("Alamat Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["alamat"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["tgl"].value == "") { | |
| alert("Tanggal Lahir Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["tgl"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["umur"].value == "") { | |
| alert("Umur Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["umur"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["email"].value == "") { | |
| alert("Email Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["email"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["pass1"].value == "") { | |
| alert("Password Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["pass1"].focus(); | |
| return false; | |
| } | |
| if (document.forms["frm-mhs"]["pass2"].value == "") { | |
| alert("Konfirmasi Password Tidak Boleh Kosong"); | |
| document.forms["frm-mhs"]["pass2"].focus(); | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Komentar
Posting Komentar