[Tugas 6 Pemrograman Web - Membuat Halaman Form beserta Validasinya dengan JQuery]

 

  •  Hilmi Zharfan Rachmadi
  • 5025201268
  • Pemrograman Web Kelas B

Deskripsi Tugas

Pada pertemuan 7 yang dilaksanakan secara offline, kami diberikan tugas latihan untuk membuat website form input data mahasiswa beserta validasinya dengan JQuery berdasarkan contoh berikut Membuat Validasi Form dengan JQuery Validation – Achmatim.Net

Hasil Tugas

Tampilan



Dalam form input mahasiswa di atas terdapat 9 kolom:
  •  NIM
  • Nama
  • Alamat
  • Tanggal Lahir
  • Umur
  • Email
  • Situs
  • Password
  • Confirm Password
Tiap kolom tersebut mempunyai sistem validasi yang diimplementasikan dengan JQuery dan JS:
  • NIM
    • Hanya menerima input berupa bilangan/digit
    • Panjang input harus 10 digit
    • Kolom harus diisi (required)
  • Nama
    • Kolom harus diisi (required)
  • Alamat 
    • Kolom harus diisi (required)
  • Tanggal Lahir
    • Kolom harus diisi (required)
    • Harus dalam format DD/MM/YY
  • Umur
    • Kolom harus diisi (required)
    • Hanya menerima input berupa bilangan/digit
    • Jangkauan nilai dari 1-100
  • Email
    • Kolom harus diisi (required)
    • Harus sesuai format email (Mempunyai @ dan domain email)
  • Situs
    • Kolom harus diisi (required)
    • Harus berupa url (disertai https://)
  • Password dan Confirm Password
    • Kolom harus diisi (required)
    • Isi keduanya harus sama

Kode HTML

<html>

<head>
    <title>JQuery Form Validation</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">


    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900' rel='stylesheet'>


    <script type="text/javascript" src="assets/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="assets/jquery/jquery.validate.min.js"></script>
    <script type="text/javascript" src="assets/js/validate.js"></script>
    <link rel="icon" href="assets/img/icon.png">

</head>

<body>

    <!-- MultiStep Form -->
    <div class="centered">
        <form action="proses.php" method="post" id="frm-mhs">
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Input Data Mahasiswa</h2>
                <h3 class="fs-subtitle">Masukkan data anda</h3>
                <input type="text" name="nim" id="nim" maxlength="10" placeholder="NIM" class="required" size="15" />
                <input type="text" name="nama" placeholder="Nama" id="nama" size="30" class="required" />
                <textarea required name="alamat" id="alamat" cols="40" rows="4" class="required" placeholder="Alamat"></textarea>
                <input type="text" name="tgl" id="tgl" maxlength="10" placeholder="Tanggal Lahir" size="15" class="required" />
                <input type="text" name="umur" id="umur" maxlength="3" size="7" placeholder="Umur" class="required" />
                <input type="text" name="email" id="email" size="50" class="required" placeholder="Email" />
                <input type="text" name="situs" id="situs" size="50" class="required" placeholder="Situs" />
                <input type="password" name="pass1" id="pass1" size="15" class="required" placeholder="Password" />
                <input type="password" name="pass2" id="pass2" size="15" class="required" placeholder="Confirm Password" />
                <!-- <input type="text" name="lname" placeholder="Last Name" />
                    <input type="text" name="phone" placeholder="Phone" /> -->
                <input type="button" name="next" class="next action-button" value="Submit" />
            </fieldset>
        </form>
    </div>
    <!-- /.MultiStep Form -->

</body>

</html>

Kode JS / JQuery

$(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
            },
            pass1: {
                equalTo: "#pass1"
            },
            pass2: {
                equalTo: "#pass1"
            }
        },
        messages: {
            nama: {
                required: "Nama harus diisi"
            },
            nim: {
                required: "Kolom nim harus diisi",
                digits: "Masukkan angka",
                minlength: "Kolom nim harus terdiri dari 10 digit",
                maxlength: "Kolom nim harus terdiri dari 10 digit"
            },
            alamat: {
                required: "Alamat harus diisi",
            },
            tgl: {
                required: "Tanggal lahir harus diisi",
            },
            umur: {
                digits: "Masukkan angka",
                range: "Angka di luar batas 0 - 100",
                required: "Umur harus diisi"
            },
            situs: {
                required: "Situs harus diisi",
                url: "URL tidak valid"
            },
            email: {
                required: "Alamat email harus diisi",
                email: "Format email tidak valid"
            },
            pass1: {
                required: "Password harus diisi",
            },
            pass2: {
                required: "Konfirmasi password harus diisi",
                equalTo: "Password tidak sama"
            }
        }
    });
});

$.validator.addMethod(
    "indonesianDate",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    },
    "Masukkan tanggal dalam format DD/MM/YYYY"
);

Kode CSS

* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    background-image: url(../img/BG.png);
    /* background-color: #1C4FFE; */
}

body {
    font-family: montserrat;
}


/*form styles*/

.error {
    font-size: small;
    color: #F00000;
    text-align: left;
}

#frm-mhs {
    /* text-align: center; */
    position: relative;
    width: 50%;
    margin-left: 27%;
    margin-right: 30%;
}

#frm-mhs #alamat {
    resize: none;
}

#frm-mhs fieldset {
    background: #FFFFFF;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    padding: 25px 50px;
    box-sizing: border-box;
    width: 80%;
    margin: 0% 10%;
    position: relative;
    margin-bottom: 100px;
}

#frm-mhs fieldset:not(:first-of-type) {
    display: none;
}


/*Inputs*/

#frm-mhs input,
#frm-mhs textarea {
    padding: 15px;
    border: 1px transparent;
    background-color: F9F9F9;
    border-radius: 9.5px;
    margin-top: 7.5px;
    border: 1px solid #E8E8E8;
    margin-bottom: 7.5px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    font-weight: 400;
    color: #191919;
    font-size: 13px;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #989898;
    opacity: 1;
    /* Firefox */
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #989898;
}

#frm-mhs input:focus,
#frm-mhs textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #1C4FFE;
    outline-width: 0;
    transition: All 0.5s ease-in;
    -webkit-transition: All 0.5s ease-in;
    -moz-transition: All 0.5s ease-in;
    -o-transition: All 0.5s ease-in;
}


/*buttons*/

#frm-mhs .action-button {
    width: 100%;
    background: #1C4FFE;
    font-weight: 600;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    transition: all .2s ease-in-out;
}

#frm-mhs .action-button:hover,
#frm-mhs .action-button:focus {
    scale: 1.02;
}


/*headings*/

.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #1C4FFE;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700;
    /* margin-top: -30px; */
}

.fs-subtitle {
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    color: #191919;
    margin-bottom: 10px;
}

Kode PHP

<?php
if (isset($_POST['Submit'])) {
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
}
?>

Comments

Post a Comment