Untitled

<html>
    <head>
        <title>Validasi Form dengan JQuery Validation</title>
        <style type="text/css">
        .labelfrm {
            display:block;
            font-size:small;
            margin-top:5px;
        }
        .error {
            font-size:small;
            color:red;
        }
        body {
            background-color: blanchedalmond;
            background-image: url("download.jpg");
        }

        .h1 {
            font-family:'Times New Roman', Times, serif;
        }
        </style>

        <script type="text/javascript" src="jquery/jquery.min.js"></script>
        <script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->

        <script type="text/javascript">
        $(document).ready(function() {
            $('#frm-mhs').validate({
                rules: {
                    nim : {
                        digits: true,
                        minlength:10,
                        maxlength:10
                    },
                    tgl: {
                        required: true
                    },
                    umur: {
                        digits: true,
                        range: [0, 100]
                    },
                    email: {
                        required:true,
                        email: true
                    },
                    situs: {
                        url: true
                    },
                    pass1 : {
                        required:true
                    },
                    pass2: {
                        required:true,
                        equalTo: "#pass1"
                    },
                    nama : {
                        required: true
                    }
                },
                messages: {
                    nim: {
                        required: "Kolom NRP harus diisi",
                        minlength: "Kolom NRP harus terdiri dari 10 digit",
                        maxlength: "Kolom NRP harus terdiri dari 10 digit"
                    },
                    email: {
                        required: "Alamat email harus diisi",
                        email: "Format email tidak valid"
                    },
                    pass2: {
                        equalTo: "Password tidak sama"
                    },
                    nama: {
                        required: "Kolom ini harus diisi",
                    },
                    alamat: {
                        required: "Kolom ini harus diisi",
                    },
                    tgl: {
                        required: "Kolom ini harus diisi",
                    },
                    umur: {
                        required: "Kolom ini harus diisi",
                    },
                    email: {
                        required: "Kolom ini harus diisi",
                    },
                    pass1: {
                        required: "Kolom ini harus diisi",
                    },
                    pass2: {
                        required: "Kolom ini harus diisi",
                    },


                }
            });
        });

        // $.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>
        <div class="container-fluid">
        <center><h1>DATA MAHASISWA</h1></center>

        <form action="proses.php" method="post" id="frm-mhs">
            <div class = "form-group">
                <label for="nim" class="labelfrm">NRP: </label>
                <input type="text" name="nim" id="nim" maxlength="10"  class="required form-control" size="15"/>
            </div>
            <div class = "form-group">
                <label for="nama" class="labelfrm">NAMA: </label>
                <input type="text" name="nama" id="nama" size="30" class="required form-control"/>
            </div>
            <div class = "form-group">
                <label for="alamat" class="labelfrm">ALAMAT: </label>
                <textarea name="alamat" id="alamat" cols="40" rows="4"  class="required form-control"></textarea>
            </div>
            <div class = "form-group">
                <label for="tgl" class="labelfrm">TANGGAL LAHIR: </label>
                <input type="date" name="tgl" id="tgl" maxlength="10" size="15"  class="required form-control"/>
            </div>
            <div class = "form-group">
                <label for="umur" class="labelfrm">UMUR: </label>
                <input type="number" name="umur" id="umur" maxlength="3" size="7"  class="required form-control"/>
            </div>
            <div class = "form-group">
                <label for="email" class="labelfrm">ALAMAT EMAIL: </label>
                <input type="text" name="email" id="email" size="50"  class="required form-control"/>
            </div>
            <div class = "form-group">
                <label for="situs" class="labelfrm">ALAMAT SITUS: </label>
                <input type="text" name="situs" id="situs" size="50" class="form-control" />
            </div>
            <div class = "form-group">
                <label for="pass1" class="labelfrm">PASSWORD: </label>
                <input type="password" name="pass1" id="pass1" size="15"   class="required form-control"/>
            </div>
            <div class = "form-group">
                <label for="pass2" class="labelfrm">ULANGI PASSWORD: </label>
                <input type="password" name="pass2" id="pass2" size="15"  class="required form-control"/>
            </div>
            <div class = "form-group">
                <label for="submit" class="labelfrm">&nbsp;</label>
                <center><input type="submit" name="Submit" value="SUBMIT" class = "btn btn-primary"/></center>
            </div>
        </form>
    </div>
    </body>
</html>