Validasi TextBox Name, Email dan Comment Menggunakan JavaScript

209

Untuk menjamin proses selanjutnya terbebas dari kesalahan diperlukan suatu proses validasi. Keuntungan menggunakan JavaScript adalah proses validasi dapat dilakukan tanpa harus me-refresh/reload bagian halaman web.

Contoh berikut akan melakukan validasi texbox yang terdapat pada form comment yaitu  name, email dan comment yang mana, semua textbox tesebut tidak boleh kosong dan email yang dimasukan harus sesuai. Validasi email yang akan dilakukan yaitu dengan  melakukan pegecekan terhadap tanda (.) titik dan tanda (@).

Berikut contoh validasi textBox yang terdapat pada form comment menggunakan JavaScript:

//<js

<html>

<head>

<title>Validasi TextBox</title>

<script type=”text/javascript”>

function hasilValidasi(){

var name = document.getElementById(‘name’).value;

var email = document.getElementById(’email’).value;

var comment = document.getElementById(‘comment’).value;

//validasi texbox

var error=””;

if(!name){

error +=’name is empty. ‘;

}

if(!email){

error +=’email is empty. ‘;

}else if((email.indexOf(‘@’,0)==-1)||(email.indexOf(‘.’,0)==-1)){

error +=’email is invalid. ‘;

}

if(!comment){

error +=’comment is empty. ‘;

}

if (error.length > 0) {

document.getElementById(‘hasil-validasi’).innerHTML=error;

return false;

}else {

//untuk aplikasi hapus bagian ini dan ganti dengan return true;

document.getElementById(‘hasil-validasi’).innerHTML=”Success!…”;

return false;

}

}

</script>

</head>

<body>

<h3>Validasi TextBox</h3>

<p>

<form action=”” method=”post” onsubmit=”return hasilValidasi();”>

<table border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td>Name</td>

<td><input name=”name” type=”text” id=”name” size=”30″ /></td>

</tr>

<tr>

<td>Email</td>

<td><input name=”email” type=”text” id=”email” size=”30″ /></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><textarea name=”comment” cols=”35″ rows=”5″ id=”comment”></textarea></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type=”submit” name=”submit-comment” id=”submit-comment” value=”Submit Comment” /></td>

</tr>

</table>

</form>

</p>

<p>Hasil validasi :</p>

<p id=”hasil-validasi”>&nbsp;</p>

</body>

</html>

//&gt;js

Untuk melihat demo skrip silahkan klik disini.

–Selamat Mencoba–

SHARE
Previous articleMembuat Direktori atau Folder Baru di Server Menggunakan PHP
Next articleJenis WordPress
"Jangan kecewa apabila hasil yang diperoleh tidak seperti yang diharapkan, Percaya bahwa semuanya adalah kesuksesan, bukan kegagalan. Mengapa saya punya banyak kesuksesan? saya tahu banyak usaha yang gagal." - Thomas Alfa Edison -
  • Salam kenal mas…saya lagi nyoba2 nih belajar validasi email javascript…pas script ini saya coba ternyata masih ada bug..email yang ada spasinya eg.(jhondoe@ yahoo.com) masih bisa masku tuh Mas..gimana biar bisa mencegahnya ya?

    paling enak sih makek regex…cuman saya masih blom gitu paham makek regex, cuma bisa kopi regex orang aja..hehehe

    • Salam kenal juga…Oiya, trim’s atas koreksinya :lol:…untuk memeriksa ‘spasi’, bagian ‘}else if((email.indexOf(‘@’,0)==-1)||(email.indexOf(‘.’,0)==-1)){‘ dilengkapi menjadi ‘}else if((email.indexOf(‘@’,0)==-1)||(email.indexOf(‘.’,0)==-1) || (email.indexOf(‘ ‘,0)!=-1)){‘….

  • validasinya membantu saya mas.. thanks so much..

  • tambah puyeng mas

  • thank’s gan…. mantab nih…