Loserkidzz

Story Of a Lonely Guy.. :) II Mencoba meninggalkan kebaikan, karna waktu begitu cepat berlalu

Tag Archives: javascript validation form

Validasi Textbox Dengan Javascript

1 Comment Posted by on April 14, 2012

JavaScript adalah bahasa pemrograman ditafsirkan bahwa sebagian besar digunakan untuk mengubah halaman web statis menjadi halaman dinamis dan interaktif.

Tujuan dari tutorial ini adalah memvalidasi formulir, jika ada salah satu dari textbox yang kosong, maka akan muncul pemberitahuan bahwa textbox tidak boleh dikosongkan. dan berikut adalah langkah2 nya :

1. Membuat formulir sederhana.

<html>
<head>
<title>Latihan Validasi Textbox Pada Form</title>
</head>
<body>
<form action=”loginproses.php” method=”post”>
<table width=”250″ align=”center”>
<tr>
<td colspan=”3″ align=”center”><strong>Masukan Identitas Anda</strong></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=”text” name=”nama” size=”17″/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type=”password” name=”passwd” size=”17″ /></td>
</tr>
<tr>
<td colspan=”3″ align=”center”>
<input type=”reset” value=”Reset”/>
<input type=”submit” name=”auth” value=”Login”/>
</td>
</tr>
</table>
</form>
</body>
</html>

2. Simpan dan Hasil dari kode diatas adalah seperti berikut :

3. Masukan kode javascript untuk validasi nya

<html>
<head>
<title>Latihan Validasi Textbox Pada Form</title>
<!– Validasi Form –>
<script language=”JavaScript” type=”text/javascript”>
    function checkform ( form )
    {
      if (form.nama.value == “”) {
        alert( “Maaf, Nama tidak boleh dikosongkan.!!” );
        form.nama.focus();
        return false ;
      }
      else if (form.passwd.value == “”) {
        alert( “Maaf, Password tidak boleh dikosongkan.!!” );
        form.passwd.focus();
        return false ;
      }
      return true ;
    }
</script>
<!– End Of Validasi Form –>
</head>
<body>
<form action=”loginproses.php” method=”post” onsubmit=”return checkform(this);”>
<table width=”250″ align=”center”>
<tr>
<td colspan=”3″ align=”center”><strong>Masukan Identitas Anda</strong></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=”text” name=”nama” size=”17″/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type=”password” name=”passwd” size=”17″ /></td>
</tr>
<tr>
<td colspan=”3″ align=”center”>
<input type=”reset” value=”Reset”/>
<input type=”submit” name=”auth” value=”Login”/>
</td>
</tr>
</table>
</form>
</body>
</html>

4. Test, dan kemudian klik tombol submit dgn salah satu textbox yang dibiarkan kosong.

 

Database, Programming , ,