Validasi Form Menggunakan Javascript dan Jquery

Validasi form merupakan salahMenjalankan Aplikasi Android di Windows. Read more ... » satu bagian dari desainDAFTAR MAHASISWA PERBAIKAN DESAIN WEB. Read more ... » web, dimana validasi form ini sangat berperan penting dalamCara mengatasai Cannot modify header PHP. Read more ... » keamanan data yangPengumuman Calon Asisten Praktikum Basisdata. Read more ... » disimpan dan nantinya digunakan sebagai informasi sehingga informasi yang didapat benar-benar Valid. Validasi dalam pemrograman berbasis web terdiri dari 2, yakni validasi client side(sisi client) dan validasi Server Side(sisi Server).  Namun dalam tulisan ini, sayaMembuka Command Prompt mode Administrator. Read more ... » hanya akan membahas validasi form dari sisi client menggunakan javascript dan JqueryBelajar JQuery I. Read more ... ». UntukBasic Pattern Recognition. Read more ... » lebih jelasnya ketikan source dibawah ini :

  • Validasi Menggunakan Javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validasi Form</title>
<script type="text/javascript">
function validasi()
{
var valnama 	= document.forms["registrasi"]["nama"].value;
var valemail 	= document.forms["registrasi"]["email"].value;
var valtelp 	= document.forms["registrasi"]["telp"].value;
var valpsn 	= document.forms["registrasi"]["pesan"].value;
var atpos=valemail.indexOf("@");
var titikpos=valemail.lastIndexOf(".");
if(valnama==null || valnama=="")
{
	alert("Nama harus diisi");
	return false;
}
else if (atpos<1 || titikpos<atpos+2 || titikpos+2>=valemail.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
  else if(isNaN(valtelp))
{
	alert("Bukan angka");
	return false;
}
}

</script>
</head>

<body>
<form action="" method="post" name="registrasi" onsubmit="return validasi()">
	<table width="400" border="" align="center" style="border:dashed 0.5px;">
    <tr>
      <td>Nama</td>
      <td><input name="nama" type="text" /></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><input name="email" type="text" /></td>
    </tr>
    <tr>
      <td>Phone</td>
      <td><input name="telp" type="text" /></td>
    </tr>
    <tr>
      <td>Pesan</td>
      <td><textarea name="pesan" cols="25" rows="3"></textarea></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
		<input type="submit" value="Simpan" />
		<input type="reset" value="Reset" onclick="this.forn.reset()" />
	  </td>
    </tr>
  </table>
</form>
</body>
</html>
  • Validasi Menggunakan JQuery

Berbeda denganTUGAS STRUKTUR DATA KELAS SAMI. Read more ... » validasi yang pertama, pada validasi ini kitaCara mengatasai Cannot modify header PHP. Read more ... » menggunakan paket Jquery, sehingga dalam pembuatan validasi nantinya kita tidak perlu menuliskan sendiri kode validasi dengan javascript, kita hanya menggunakan javascript yang telah disediakan oleh jquery. Untuk lebih jelasnya download 2 buah file yakni Jquery dan Jquery validate. Jika sudah, ketikan source dibawah :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.validate.pack.js"></script>
<script type="text/javascript">
$(document).ready(function()
	{$("#reg").validate();}
)
</script>
<style type="text/css">
input.error, select.error { border: 1px solid red; }
label.error { color:red; margin-left: 10px; }
</style>
</head>

<body>
<form action="" method="post" name="validasi" id="reg" >
	<table width="400" border="" align="center" style="border:dashed 0.5px;">
    <tr>
      <td>Nama</td>
      <td><input name="nama" type="text" class="required" title="Nama tidak boleh kosong"/></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><input name="email" type="text" class="required email" title="Email tidak boleh kosong"/></td>
    </tr>
    <tr>
      <td>Phone</td>
      <td><input name="telp" type="text" class="required number" title="Nomor telfon tidak boleh kosong"/></td>
    </tr>
    <tr>
      <td>Pesan</td>
      <td><textarea name="pesan" cols="25" rows="3" class="required" title="Pesan tidak boleh kosong"></textarea></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" value="Simpan" />  <input type="reset" value="Reset" onclick="this.forn.reset()" /></td>

    </tr>
  </table>
</form>
</body>
</html>

Selamat mencoba…
by Burhanudin.

Posted in Html, Programing and tagged , , , .