Validasi Form dengan Javascript

Publish Date : 23-11-2023 , dibaca 303 kali, Hari ini dibaca : 1 kali ,0 comments

Tidak habis-habisnya admin membahas tentang Validasi Form Untuk penanganan dan pencegahan data di website , Pada tutorial kali ini kita akan membahas tehnik membuat validasi form dengan menampilkan pesan error di dalam form tersebut , validasi form ini kita menggunakan javascript , Sebenarnya membuat validasi form tergantung dari setiap orang , untuk kelas pemula validasi pada form dengan menampilkan pessan di dalam form tersebut mungkin masih belum banyak yang mengerti cara yang digunakan. nah ,,, pada kesempatan ini kita akan membahas validasi form tersebut

Untuk validasi ini agar lebih aman kita dapat kombinasikan dengan beberapa contoh validasi yang lainnya :

VALIDASI FORM WITH JAVASCRIPT (1)

Dalam Validasi form dengan javascript ini , kita akan membuat validasi dengan gaya seperti di PHP , dimana kita akan menampilkan pesan error langsung di dalam form dengan menggunakan fungsi innerHTML di javascript , beberapa contoh dibawah ini kita akan membuat validasi terhadap beberapa type input file yaitu :

Validasi data yang kosong , pada inputan nama
Validasi input tipe email dengan javascript
Validasi Password dari inputan kosong dan banyak nya password yang harus di input
Validasi input type radio dengan javascript
Validasi input type select dengan javascript

Demo(1) Demo(2)

Code HTML

<!DOCTYPE html>
<html>
<head>
    <title>Validasi Form dengan Javascript Senterwebs.com</title>
    <meta charset="utf-8">
    <meta name="Author" content="Senterwebs">
    <link rel="shortcut icon" href="https://senterwebs.com/favicon.png">
    <link rel="icon" href="https://senterwebs.com/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function validate()
    {
    var error="";
    //Validasi Nama dari inputan kosong
    var name = document.getElementById( "nama" );
    if( name.value == "" )
    {
    error = "Anda Belum Mengisi Nama. ";
    document.getElementById( "error_id" ).innerHTML = error;
    name.focus();
    return false;
    }
    //Validasi inputan email kosong dan tipe email
    var email = document.getElementById( "email" );
    if( email.value == "" || email.value.indexOf( "@" ) == -1 )
    {
    error = "Anda Belum Mengisi Email. ";
    document.getElementById( "error_id" ).innerHTML = error;
    email.focus();
    return false;
    }
    //Validasi Password Kosong & dengan minimal 8 digit
    var password = document.getElementById( "password" );
    if( password.value == "" || password.value.length <= 8 )
    {
    error = " Password minimal 8 Digits . ";
    document.getElementById( "error_id" ).innerHTML = error;
    password.focus();
    return false;
    }
    if (!document.getElementById("jkl").checked && !document.getElementById("jkm").checked ) {
        error = " Pilih Jenis Kelamin. ";
        document.getElementById( "error_id" ).innerHTML = error;
        return false;
    }
    var status = document.getElementById( "status" );
    if( status.value == "" )
    {
    error = "Anda Belum Memilih Status. ";
    document.getElementById( "error_id" ).innerHTML = error;
    status.focus();
    return false;
    }    
    else
    {
    return true;
    }
    }
</script>
    </head>
    <body>

    <div class="container">
        <div class="col-sm-4 mx-auto">
            <p class='text-center text-success'><b>Validasi Form dengan Javascript Senterwebs.com</b></p>
            <p id="error_id" class='text-danger text-center'></p>
       <form action="proses.php" method="post" onsubmit="return validate();">
        <div class="form-group">
            <label>Username:</label>
            <input type="text" name="username" id="nama" class="form-control" placeholder="Masukan Username"  />

        </div>
        <div class="form-group">
            <label>Email:</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Masukan Email" />
        </div>
        <div class="form-group">
            <label>Password:</label>
            <input type="password" name="password" class="form-control" id="password" placeholder="Masukan Password"/>
        </div>
        <div class="form-group">
            <label>Jenis Kelamin:</label>
            <input type="radio" name="jk" id="jkl" value="L">Laki-laki &nbsp;
            <input type="radio" name="jk" id="jkm" value="P">Perempuan
        </div>
        <div class="form-group">
            <label>Status:</label>
            <select id='status' name="status" class="form-control" >
                    <option value="">Pilih</option>
                    <option value="1">Kawin</option>
                    <option value="2">Belum Kawin</option>    
                </select>

        </div>        
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </form>
     
    </div>
    </div>
    </body>
</html>

Demo

Pada code html diatas Perlu di katahui dimana kita memberikan action javascript onsubmit="return validate(); pada tag <form> yang akan memanggil function validate() pada javascript, kemudian disini kita menggunakan id pada masing-masing inputan yang berupa "id=nama" pada textbox inputan nama , yang nantinya kita ambil value nya dengan membuat variabel berupa var name = document.getElementById( "nama" ); , begitu seterusnya pada setiap inputan yang ada.

Dan terakhir kita menggunakan fungsi innerHTML yang dikirimkan lewat tag ( <p id="error_id" ></p> )yang kita beri id didalamnya, fungsi tersebut digunakan untuk menampilkan pesan error yang telah diproses oleh script javascript

Selain diatas , Hal yang penting diperhatikan disini , mungkin bukan hanya inputan data kosong pada Email , namun untuk email , tentu kita harus memberikan validasi yang berbeda , pada code diatas , disini kita sudah membuat validasi untuk inputan email , berikut code nya

 //Validasi inputan email kosong dan tipe email
    var email = document.getElementById( "email" );
    if( email.value == "" || email.value.indexOf( "@" ) == -1 )
    {
    error = "Anda Belum Mengisi Email. ";
    document.getElementById( "error_id" ).innerHTML = error;
    email.focus();
    return false;
    }

Kemudian untuk password , disini kita memberikan validasi length yang bertujuan untuk mendapatkan banyak string / karakter , ini diguanakn untuk membuat minimal password yang harus di isi uleh user , sebagai salah satu standar password anda , berikut script nya :

    //Validasi Password Kosong & dengan minimal 8 digit
    var password = document.getElementById( "password" );
    if( password.value == "" || password.value.length <= 8 )
    {
    error = " Password minimal 8 Digits . ";
    document.getElementById( "error_id" ).innerHTML = error;
    password.focus();
    return false;
    }

VALIDASI FORM WITH JAVASCRIPT (2)

Dalam Validasi form dengan javascript ini , sebenarnya sama dengan yang diatas , hanya saja disini kita akan membuat validasi dengan menampilkan pesan box dengan menggunakan fungsi alert di javascript , kita menggunakan penamaan pada masing-masing tag html tidak menggunakan id seperti contoh diatas , contoh :

<input type="text" name="username" id="nama" class="form-control" placeholder="Masukan Username" /> (contoh diatas)

TAPI KITA MENGGUNAKAN SEPERTI INI

<input type="text" name="username"  class="form-control" placeholder="Masukan Username"  /> (yang kita gunakan sekarang)

<!DOCTYPE html>
<html>
<head>
    <title>Validasi Form dengan Javascript Senterwebs.com</title>
    <meta charset="utf-8">
    <meta name="Author" content="Senterwebs">
    <link rel="shortcut icon" href="https://senterwebs.com/favicon.png">
    <link rel="icon" href="https://senterwebs.com/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function validate(){
    //Validasi Nama dari inputan kosong
    if( document.frm.username.value == "" )
    {
    alert( "Masukkan inputan Nama!" );
    document.frm.username.focus();
    return false;
    }
    //Validasi Email dari inputan kosong
    if( document.frm.email.value == "" || document.frm.email.value.indexOf( "@" ) == -1 || document.frm.email.value.indexOf( ".") == -1) 
    {
    alert( "Masukkan Email dengan Benar!" );
    document.frm.email.focus();
    return false;
    }    
    //Validasi Password
    if( document.frm.password.value == "" || document.frm.password.value.length <= 8 )
    {
    alert( "Password Minimal 8 Karakter!" );
    document.frm.password.focus();
    return false;
    }
    if (!document.getElementById("jkl").checked && !document.getElementById("jkm").checked ) {
        alert( "Pilih Jenis Kelamin!" );
        return false;
    }
    if( document.frm.status.value == "" )
    {
    alert( "Pilih Status!" );
    document.frm.status.focus();
    return false;
    }
    else {
    return true;
    }
    }
</script>
    </head>
    <body>

    <div class="container">
        <div class="col-sm-4 mx-auto">
            <p class='text-center text-success'><b>Validasi Form dengan Javascript Senterwebs.com</b></p>
            <p id="error_id" class='text-danger text-center'></p>
       <form action="proses.php" name="frm" method="post" onsubmit="return validate(this);">
        <div class="form-group">
            <label>Username:</label>
            <input type="text" name="username"  class="form-control" placeholder="Masukan Username"  />

        </div>
        <div class="form-group">
            <label>Email:</label>
            <input type="email" name="email"  class="form-control" placeholder="Masukan Email" />
        </div>
        <div class="form-group">
            <label>Password:</label>
            <input type="password" name="password" class="form-control"  placeholder="Masukan Password"/>
        </div>
        <div class="form-group">
            <label>Jenis Kelamin:</label>
            <input type="radio" name="jk" id="jkl" value="L">Laki-laki &nbsp;
            <input type="radio" name="jk" id="jkm" value="P">Perempuan
        </div>
        <div class="form-group">
            <label>Status:</label>
            <select  name="status" class="form-control" >
                    <option value="">Pilih</option>
                    <option value="1">Kawin</option>
                    <option value="2">Belum Kawin</option>    
                </select>

        </div>        
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </form>
     
    </div>
    </div>
    </body>
</html>