Follow Us @soratemplates

Sabtu, 08 April 2017

Javascript Form Validation



Form pendaftaran menggunakan validasi javascript
<html>
<head>
    <title>Form Pendaftaran</title>

<script type="text/javascript">

function validasi()
{
    var nimz = document.forms["formulir"]["nim"].value;
    var number = /^[0-9]+$/;
    var nama = formulir.nama.value;
    var namaValid    = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
    var pesan = '';
    if (nama = null || nama == '') {
            alert("Nama tidak boleh kosong !");
                        return false;
        };

        if (nama != '' && !nama.match(namaValid)) {
            alert("nama tidak valid !");
                        return false;
        };

    if (nimz == null || nimz == "")
    {
        alert("NIM anda tidak boleh kosong !");
        return false;

    };
    if(!nimz.match(number))
    {
        alert("NIM anda harus angka");
        return false;
    };
    if(nimz.length!=10)
    {
        alert("NIM anda harus 9 digit !");
        return false;
    };
    return true;
}

</script>
</head>
<body>
<font face="Arial">

<p align="center">PENDAFTARAN</p>

<p>
<form id="formulir" action="proses.php" method="post" onSubmit="return validasi()">
    <table>
        <tr>
            <td>Nama : </td>
            <td><input type="text" size=30 placeholder="contoh: Rian" name="nama" ></td>
        </tr>

        <tr>
            <td>NIM : </td>
            <td><input type="text" size=20 placeholder="contoh: 1600018016" name="nim" id="nim"></td>
        </tr>

        <tr>
            <td>Alamat : </td>
            <td><textarea rows=5 cols=40 name="alamat"></textarea></td>
        </tr>

        <tr>
            <td>Jenis Kelamin : </td>
            <td><select name="jk"><option value="pria">Pria</option><option value="wanita">wanita</option></select></td>
        </tr>

        <tr>
            <td></td>
            <td><input type="submit" value="kirim" onlick="validasi()"><input type="reset" value="Batal"></td>
        </tr>

    </table>
</form>

</p>
</font>
</body>
</html>

Hasil :






1 komentar:

  1. selamat malam kak. postingan kakak sangat menarik, walaupun singkat, tapi mudah untuk di pahami. kakak juga menambahkan langsung detail dari listingnya dan menambahkan hasil outputnya. semangat terus kak untuk berkarya,semoga diberi kesehatan. dan dapat membuat lebih banyak postingan yang lebih bermanfaat. perkenalkan nama saya Sri Agustina, Nim saya 1922500194. dan link website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus