Serba Tulisan: Membuat Validasi Form Dengan JQuery

Validasi form pada web aplikasi merupakan hal yang wajid dilakukan untuk melakukan pengecekan data yang diinputkan oleh user. Jika data yang diinputkan user tersebut sudah sesuai maka akan diproses untuk disimpan di database sedangkan jika terjadi kesalahan penginputan maka data tersebut tidak akan disimpan dan dikembalikan ke user dengan muncul peringatan atau pesan yang menyatakan data tersebut tidak valid.
Ada banyak cara memvalidasi form berbasis web, namun cara yang paling simple dan menarik menurut penulis adalah menggunakan jQuery, lebih tepatnya menggunakan jquey Plugin bernama JQuery validate.
Untuk penggunaan jquery validate ikuti langkah berikut :
1. Download Jquery.js dan jquery.validate.js
2. Include-kan file js tersebut ke dalam tag <head> di HTML seperti berikut

<head>

<title>Sample Validasi</title>

<script type="text/javascript" src="jquery-1.10.2.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

</head>

3. Tuliskan script untuk menjalankan validasi di form

<script type="text/javascript">

$(document).ready(function() {

    $("#form").validate(); //id form

});

</script>

4. Buat sintak HTML nya

<form id="form" method="post" action="proses.php">

<label for="nama">Name</label>

<input id="nama" name="nama" size="25" class="required" minlength="2" />

<label for="umur">umur</label>

<input id="umur" name="umur" size="25" class="required number" />

<label for="email">E-Mail</label>

<input id="email" name="email" size="25" class="required email" />

<input class="submit" type="submit" value="Daftar"/>

</form>

Untuk menempelkan validasi di tiap inputan atau tag <input>, kita harus menambahkan nama class seperti di sintak di atas. Berikut penjelasan nama class untuk validasi,
required, inputan tersebut wajib diisi.
number, yang diinputkan harus angka tidak boleh huruf.
email, yang diinputkan harus berformat email misalnya : nama@mail.com

Berikut sintak keseluruhan untuk menjalankan validasi di form inputan

<html>
<head>

<title>Sample Validasi</title>

<script type="text/javascript" src="jquery-1.10.2.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("#form").validate(); //id form

});

</script>

</head>
<body>

<form id="form">

<label for="nama">Name</label>

<input id="nama" name="nama" size="25" class="required" minlength="2" />

<label for="umur">umur</label>

<input id="umur" name="umur" size="25" class="required number" />

<label for="email">E-Mail</label>

<input id="email" name="email" size="25" class="required email" />

<input class="submit" type="submit" value="Daftar"/>

</form>
</body>
</html>

Untuk lebih memahami bisa dilihat di link Berikut.

Semoga bermanfaat..

Serba Tulisan

Friday 20 March 2015

Membuat Validasi Form Dengan JQuery

2 comments: