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)


0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

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