menu-classic

Rabu, 12 April 2017

Validasi menggunalan Java Script

Validasi menggunalan Java Script

Hallo Gaess, Kali ini saya akan menunjukkan kodingan simple cara mem-validasi sebuah form di html menggunakan java script. Yosh langsung saja ketik koding dibawah ini :

<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 10 digit !");
        return false;
    };
    return true;
}
</script>
</head>
<body>
<font face="Arial">
<p align="Left">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="Namamu" name="nama" ></td>
        </tr>
<tr>
            <td>NIM : </td>
            <td><input type="text" size=20 placeholder="1600018030" 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 colspan="3" align="right">
              <input type="submit" value="Kirim"/>
              <input type="reset" value="Batal"/>
            </td>
        </tr>
</table>
</form>
</p>
</font>
</body>
</html>



Gambar diatas adalah gambar ketika koding dibuka di browser. Ya cukup sekian postingan dari saya kali ini semoga bermanfaat B)


Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | GreenGeeks Review