Tutorial Validasi Form dengan Javascript - Apabila Anda sedang mencari informasi terkait dengan Tutorial Validasi Form dengan Javascript, maka anda ada di website yang benar, yaitu Aneka source code aplikasi, Rekomendasi kami untuk Tutorial Validasi Form dengan Javascript berikut mungkin adalah cocok dengan yang anda butuhkan saat ini.

Tutorial Validasi Form dengan Javascript

Ada dua tipe validasi form, validasi client side dan validasi server side. Validasi server side telah dibahas di tutorial Validasi Form Dengan PHP. Validasi client side menggunakan javascript akan dijelaskan di tutorial ini. Di tutorial sebelumnya "Validasi Form dengan PHP" sudah disebutkan alasan validasi client side tidak dianjurkan. Namun validasi client side membuat website lebih user friendly. User dapat langsung mengetahui jika ada kesalahan pada input data, tanpa harus menunggu load halaman php untuk validasi form. Artinya website tidak perlu menload halaman yang sama berkali kali saat tejadi kesalahan input data. Bisa juga dikatakan proses input data akan menjadi lebih cepat.



Perlu diingat jika menggunakan validasi client side, data masih perlu divalidasi menggunakan validasi server side untuk memastikan kebenaran data.

Validasi Form dengan Javascript

Untuk mengikuti tutorial ini anda diharapkan memiliki pengetahuan tetang javascript dasar. Untuk mem-validasi sebuah form, agar tidak ada data yang kosong maka bisa digunakan script di bawah:

[php]


<form name="form1" id="form1" action="" method="post" />

<dl>

<dt>First Name</dt>



<dd><input name="firstName" id="firstName" type="text" /></dd>


<dt>Last Name</dt>


<dd><input name="lastName" id="lastName" type="text" /></dd>


<dt>Email</dt>


<dd><input name="email" id="email" type="text" /></dd>


<dt>Phone</dt>


<dd><input name="phone" id="phone" type="text" /></dd>


<dt></dt>


<dd><input type="button" name="save" id="save" value="Save" onclick="saveForm(); return false;" /></dd>


</dl>


</form>


<script type="text/javascript">
function saveForm(){
if(document.getElementById('firstName').value == ''){
alert('First Name tidak boleh kosong');
document.getElementById('firstName').focus();
return false;
}
if(document.getElementById('lastName').value == ''){
alert('Last Name tidak boleh kosong');
document.getElementById('lastName').focus();
return false;
}
if(document.getElementById('email').value == ''){
alert('Email tidak boleh kosong');
document.getElementById('email').focus();
return false;
}
if(document.getElementById('phone').value == ''){
alert('Phone tidak boleh kosong');
document.getElementById('phone').focus();
return false;
}
document.getElementById('form1').submit();
}
</script>
[/php]

Dari baris 1 sampai baris 14 adalah untuk membuat html form. Kemudian di baris16 ditambahkan tag html

[php]"<script>"[/php]

. Pada line selanjutnya membuat function saveForm() untuk melakukan validasi. Function saveForm() akan dipanggil pada saat user mengklik tombol save. Sehingga di baris 12 pada button save ditambakan attribute onlick="saveForm(); return false;". Di baris 18 anda akan melihat

[php]"if(document.getElementById('firstName').value == '')"[/php]

, baris ini berarti mengambil nilai yang diinputkan pada element dengan id="firstName" dan mengeceknya apakah kosong atau tidak. Jika kosong maka akan ditampilkan alert message (baris 19). Di baris 20 artinya memindahkan focus kursor ke element dengan id="firstName".

Javascript juga bisa digunakan untuk memvalidasi hal hal yang lain seperti berikut.
Validasi Email dengan Javascript

[php]

function validasiEmail(email){
var validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; //regex untuk cek email
if(validEmail.test(email)){
return true;
}
return false;
}
alert(validasiEmail('email@example.com')); //hasil true
alert(validasiEmail('bukanemail')); //hasil false
[/php]

Validasi Kode Pos dengan Javascript

[php]

function validasiPostalKode(postalCode){
var validPostalCode = /^\d{5}([\-]\d{4})?$/; //regex untuk cek kode pos
if(validPostalCode.test(postalCode)){
return true;
}
return false;
}
alert(validasiPostalKode('80361')); //hasil true
alert(validasiPostalKode('80361-1234')); //hasil true
alert(validasiPostalKode('salah')); //hasil false
alert(validasiPostalKode('1234')); //hasil false
[/php]

Silahkan anda lihat juga tutorial validasi form yang lain pada blog sourcecodeaplikasi.info

Terima kasih telah membaca tentang Tutorial Validasi Form dengan Javascript

Aneka Source Code Aplikasi - Tutorial Validasi Form dengan Javascript, Semoga bisa membantu anda dalam belajar pemrograman atau mungkin dapat juga menjadi ide atau inspirasi untuk membuat karya baru yang lebih baik lagi.

Anda sedang membaca Tutorial Validasi Form dengan Javascript artikel tentang aneka source code aplikasi https://anekasourcecode.blogspot.com/2016/07/tutorial-validasi-form-dengan-javascript.html Semoga blog sederhana ini dapat membantu dan bermanfaat bagi anda.

Tweet