Validasi TextBox Name, Email dan Comment Menggunakan JavaScript

Advertisements

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–


Advertisements
Related Posts Plugin for WordPress, Blogger...
Comments
  1. Septian
    • Nanxz
  2. IT Programmer
  3. www.oksida.com
  4. Nasrudin

Leave a Reply

Your email address will not be published. Required fields are marked *