Validasi Form dengan Javascript



Sleman, 11 November 2012. Ba’da maghrib saya teringat mahasiswa-mahasiswa saya yang sedang belajar tentang Javascript. Nah, suatu saat saya pernah meminta mahasiswa untuk membuat validasi form dengan javascript. Singkat cerita sebagian mahasiswa cukup kesulitan dan kebingungan untuk bagaimana memulainya. Nah, kali ini saya mencoba menulis tentang bagaimana membuat validasi form dengan menggunakan Javascript.

Adapun langkah-langkahnya adalah sebagai berikut :

  1. Jalankan terlebih dahulu WAMP Server, atau XAMPP
  2. Buat folder di www (untuk pengguna WAMP) atau htdocs (untuk pengguna XAMPP)
  3. Buat sebuah database melalui PHPMyAdmin dengan nama databaseku seperti pada gambar di bawah ini, kemudian klik tombol create 
  4. Buatlah table dengan nama person dengan struktur table sebagai berikut :
  5.  Buatlah sebuah file untuk melakukan koneksi dengan database yang sudah dibuat! Simpan kode PHP di bawah ini dengan nama connect.php !
    <?php
     $host='localhost';
     $user='root';
     $pwd='';
     $database='databaseku';
    
     $conn=mysql_connect($host,$user,$pwd) or die ('Error connecting to mysql');
     mysql_select_db($database,$conn);
    ?>
    
  6. Buatlah file baru dengan nama index.php !
    <html>
    <head>
     <title>Test</title>
     <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
    <form name="myform" method="post" action="index.php">
     <fieldset>
     <legend>Form</legend>
     <ul>
     <li>
     <label>Name</label>:
     <input type="text" name="name"><br/>
     </li>
     <li>
     <label>Address</label>:
     <input type="text" name="address">
     </li>
     <li class="button">
     <input type="submit" name="submit" value="Send" onClick="return cek()">
     <input type="reset" value="Reset">
     </li>
     </ul>
     </fieldset>
    </form>
    </body>
    </html>
    
    
  7. Tambahkan kode javascript untuk melakukan validasi data, letakkan diantara tag <head></head>!
    function cek(){
     if(document.myform.name.value==""){
     alert("Name cannot be empty");
     myform.name.focus();
     return false;
     }
     if(document.myform.address.value==""){
     alert("Address cannot be empty");
     myform.address.focus();
     return false;
     }
    
     return true;
     }
    
    
  8. Tambahkan kode PHP di bawah ini pada file index.php untuk menampilkan data hasil inputan !
    <?php
    include "connect.php";
    
    if($_POST['submit'] == 'Send'){
    
    $name = $_POST['name'];
    $address = $_POST['address'];
    
    $query_insert=mysql_query("INSERT INTO PERSON (name,address) VALUES ('$name','$address')");
    
    if(!empty($query_insert)){
    echo"<table>
    <tr>
    <th>No</th>
    <th>Name</th>
    <th>Address</th>
    </tr>";
    
    $query_select=mysql_query("SELECT * FROM PERSON");
    $i=0;
    while($data=mysql_fetch_array($query_select)){
    $i++;
    echo"<tr>
    <td>".$i."</td>
    <td>".$data['name']."</td>
    <td>".$data['address']."</td>
    </tr>";
    }
    echo"</table>";
    echo"<a href='index.php'>Back</a>";
    }else{
    echo "Data gagal disimpan";
    echo mysql_error();
    }
    }
    ?>
    
    
  9. Buat file baru dengan nama style.css berikut ini :
    fieldset {
     margin: 1.5em 0 0 0;
     padding: 0;
     width:300px;
     border-radius:15px;
     background:#F0F0F0;
    
    }
    
    legend {
     margin-left: 2.5em;
     padding: 0;
     color: #000;
     font-weight: bold;
    }
    
    fieldset ul {
     list-style: none;
    }
    
    fieldset li {
     float: left;
     clear: left;
     width: 100%;
    }
    
    label {
     float: left;
     width: 3.5em;
     text-align: left;
    }
    
    li.button{
     text-align:center;
     padding-top:1em;
     padding-bottom:1em;
    }
    
    table{
     border:1px solid black;
     background:#F0F0F0;
     border-collapse:collapse;
    }
    
    th,tr,td{
     border:1px solid black;
     padding:1em;
    }
    
    
  10. Hasil yang diharapkan :
  11. Hasil keluaran setelah data diinputkan :
  12. Jika ada data yang belum diisi maka akan muncul seperti pada gambar berikut :

OK, selamat mencoba dan silahkan download source code nya di sini

Advertisements

5 thoughts on “Validasi Form dengan Javascript

Leave a Reply

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