Loserkidzz

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

Validasi Textbox Dengan Javascript


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.

 

Advertisements

One response to “Validasi Textbox Dengan Javascript

  1. Budiman Oktavianus August 24, 2015 at 12:09 PM

    Thanks for nice science 🙂

Berikan Komentar mu...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: