Let us learn to make your own website using the programming language php, java, html, css etc.

Java Script untuk validasi form input

by dekurnia , at 6:05 AM , have 0 comments
Untuk yang pertama kali, saya ingin berbagi bagaimana cara menggunakan Java Script untuk validasi form input, dengan berbagai jenis form. Validasi sendiri merupakan suatu cara untuk mendapat kan data yang sebenarnya dari User yang mengisikan data pada form yang di sediakan, ok langsung saja di bahas yuuk…

  • Mencegah Inputan Kosong

    Misalnya ada sebuah form katakanlah username, kita ingin user mengisikan  data (username nya) di sana dan tidak boleh kosong. Berikut Kode Form nya :
    --------------------------------------------------------------------------------------------------------
     
    <form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
    <p>Username: <input name="username" type="text"></p>
    <p><input name="" type="submit" value="Submit"></p>
    </form>
     
    ----------------------------------------------------------------------------- 
    Pada form tersebut terdapat kode onsubmit=”return validasi_input(this)” , fungsinya adalah ketika tombol Submit di klik maka akan menuju ke function validasi_input pada JavaScript sebelum ke action=”aksi.php”, Berikut Kode JS nya, letakkan di atas Form ya..
    ---------------------------------------------------------------------------------------------
    <script type="text/javascript">
    function validasi_input(form){
      if (form.username.value == ""){
        alert("Username masih kosong!");
        form.username.focus();
        return (false);
      }
    return (true);
    }
    </script>
    ----------------------------------------------------------------------- 
     
    Ketika from dengan nama username valuenya == ” ” (kosong) maka akan muncul alert “Username masih kosong” dan from username akan focus.... lanjuttt
dekurnia
Java Script untuk validasi form input - written by dekurnia , published at 6:05 AM, categorized as Java Script . And have 0 comments
No comment Add a comment
Cancel Reply
GetID
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger