Validasi Form dengan jQuery Validation - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Validasi Form dengan jQuery Validation, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel jQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Validasi Form dengan jQuery Validation
link : Validasi Form dengan jQuery Validation
Sebenarnya, dalam HTML sudah tersedia fungsi untuk validasi masukkan pada tag input. Dan validasi tersebut semakin berkembang pada HTML5. Namun, sayangnya beberapa validasi form pada HTML5 hanya bisa berjalan pada beberapa browser tertentu saja.Sehingga, jika kita bergantung pada validasi HTML5 maka ada kemungkinan validasi kita tidak bisa digunakan pada beberapa browser.
Untuk itulah, di sini kita akan sedikit belajar mengenai jQuery Validation, sebuah library jQuery yang berfungsi untuk melakukan validasi terhadap form yang kita buat dengan html.
Sebelum mulai belajar menggunakannya, lebih baik kita download terlebih dahulu jQuery Validation-nya di http://jqueryvalidation.org/. Sekarang, bagaimana menggunakan jQuery Validation tersebut?
1. Kita masukkan jquery dan jquery validate pada halaman kita. Mungkin bisa dilihat seperti ini:
yang paling penting, sesuaikan nilai src dengan alamat jquery.min.js dan jquery.validate.min.js.
2. Kita buat formnya. Di sini, kita beri id pada setiap input. Biar lebih mudah, id dan name kita isi dengan nilai yang sama.
3. Kita tambahkan validasi yang kita inginkan pada tag input. Seperti required, minlength="2" atau apalah... Jangan lupa kasih type dari input itu ya. Contohnya seperti ini:
4. Kita tambahkan script javascript ini, agar kalau semua validasi terlewati akan muncul pesan "Sudah tervalidasi". Jika kita menggunakan jQuery validation untuk sebuah aplikasi. Mungkin script ini bisa diabaikan/tidak ditulis.
5. Kita beri tambahan script javascript yang fungsinya untuk memastikan validasi dari tiap input yang ada di dalam form. Jangan lupa, sesuaikan dengan id form.
6. Keseluruhannya nanti seperti ini:
Cara di atas adalah cara yang paling mudah menggunakan jQuery Validation. Tapi bagaimana kalau kita ingin input tervalidasi tanpa harus menekan tombol submit terlebih dahulu? Ini dia caranya. Cukup ganti script ini:
dengan script ini:
Waktunya penjelasan...
1. rules berarti peraturan atau validasi dari input dengan name tersebut. Contoh, "email:" berarti ditujukan pada input dengan name "email", "required: true" berarti input ini harus ada isinya, "email: true" berarti input ini harus sesuai dengan validasi email.
2. messages berarti pesan yang ditampilkan apabila validasi tidak terpenuhi. Jika tidak kita tulis, maka akan diisi dengan pesan default dari jquery validation. Sesuaikan dengan rules ya!
Baiklah, itu yang bisa kita pelajari hari ini. Ketika kita mendownload jQuery Validation, di dalamnya sudah ada dokumentasi dan contoh-contoh. Jadi silahkan dipelajari sendiri lebih lanjut. Terima kasih...
Anda sekarang membaca artikel Validasi Form dengan jQuery Validation dengan alamat link https://dev-create.blogspot.com/2023/08/validasi-form-dengan-jquery-validation.html
Judul : Validasi Form dengan jQuery Validation
link : Validasi Form dengan jQuery Validation
Validasi Form dengan jQuery Validation
Validasi merupakan hal penting yang harus ada dalam sebuah form untuk memasukkan data. Selain untuk menjaga agar data yang dimasukkan sesuai dengan yang dibutuhkan, validasi juga berfungsi untuk mengingatkan apabila user melakukan kesalahan ketika mengisi form.
Sebenarnya, dalam HTML sudah tersedia fungsi untuk validasi masukkan pada tag input. Dan validasi tersebut semakin berkembang pada HTML5. Namun, sayangnya beberapa validasi form pada HTML5 hanya bisa berjalan pada beberapa browser tertentu saja.Sehingga, jika kita bergantung pada validasi HTML5 maka ada kemungkinan validasi kita tidak bisa digunakan pada beberapa browser.
Untuk itulah, di sini kita akan sedikit belajar mengenai jQuery Validation, sebuah library jQuery yang berfungsi untuk melakukan validasi terhadap form yang kita buat dengan html.
JQuery plugin ini membuat klien sederhana validasi form sisi mudah, sementara masih menawarkan banyak pilihan kustomisasi. Itu membuat pilihan yang baik jika Anda sedang membangun sesuatu yang baru dari awal, tetapi juga ketika Anda mencoba untuk mengintegrasikan sesuatu ke aplikasi yang sudah ada dengan banyak markup yang ada. Plugin dibundel dengan satu set berguna metode validasi, termasuk URL dan validasi email, sambil memberikan sebuah API untuk menulis metode Anda sendiri. Semua metode dibundel datang dengan pesan error default dalam bahasa Inggris dan terjemahan ke 37 bahasa lainnya.
Plugin ini ditulis dan dipelihara oleh Jörn Zaefferer, anggota tim jQuery, pengembang utama di tim jQuery UI dan pemelihara dari QUnit. Itu dimulai kembali hari-hari awal jQuery pada tahun 2006, dan diperbarui dan diperbaiki sejak itu
Sebelum mulai belajar menggunakannya, lebih baik kita download terlebih dahulu jQuery Validation-nya di http://jqueryvalidation.org/. Sekarang, bagaimana menggunakan jQuery Validation tersebut?
1. Kita masukkan jquery dan jquery validate pada halaman kita. Mungkin bisa dilihat seperti ini:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh jQuery Validation</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
</head>
<body>
</body>
</html>
yang paling penting, sesuaikan nilai src dengan alamat jquery.min.js dan jquery.validate.min.js.
2. Kita buat formnya. Di sini, kita beri id pada setiap input. Biar lebih mudah, id dan name kita isi dengan nilai yang sama.
3. Kita tambahkan validasi yang kita inginkan pada tag input. Seperti required, minlength="2" atau apalah... Jangan lupa kasih type dari input itu ya. Contohnya seperti ini:
<form id="komen" method="post" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
4. Kita tambahkan script javascript ini, agar kalau semua validasi terlewati akan muncul pesan "Sudah tervalidasi". Jika kita menggunakan jQuery validation untuk sebuah aplikasi. Mungkin script ini bisa diabaikan/tidak ditulis.
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
alert("Sudah Tervalidasi!");
}
});
</script>5. Kita beri tambahan script javascript yang fungsinya untuk memastikan validasi dari tiap input yang ada di dalam form. Jangan lupa, sesuaikan dengan id form.
$().ready(function() {
$("#komen").validate();
});
6. Keseluruhannya nanti seperti ini:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh jQuery Validation</title>
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
$("#komen").validate();
});
</script>
</head>
<body>
<form id="komen" method="post" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
Cara di atas adalah cara yang paling mudah menggunakan jQuery Validation. Tapi bagaimana kalau kita ingin input tervalidasi tanpa harus menekan tombol submit terlebih dahulu? Ini dia caranya. Cukup ganti script ini:
$("#commentForm").validate();
dengan script ini:
$("#komen").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: "true",
comment:"required"
},
messages: {
name: {
required: "Tolong isi nama Anda!",
minlength: "Tolong isi lebih dari 2 karakter!"
},
email: "Tolong isi sesuai dengan email!",
url: "Tolong isi sesuai dengan url!",
comment: "Tolong isi komentar Anda!"
}
});
Waktunya penjelasan...
1. rules berarti peraturan atau validasi dari input dengan name tersebut. Contoh, "email:" berarti ditujukan pada input dengan name "email", "required: true" berarti input ini harus ada isinya, "email: true" berarti input ini harus sesuai dengan validasi email.
2. messages berarti pesan yang ditampilkan apabila validasi tidak terpenuhi. Jika tidak kita tulis, maka akan diisi dengan pesan default dari jquery validation. Sesuaikan dengan rules ya!
Baiklah, itu yang bisa kita pelajari hari ini. Ketika kita mendownload jQuery Validation, di dalamnya sudah ada dokumentasi dan contoh-contoh. Jadi silahkan dipelajari sendiri lebih lanjut. Terima kasih...
Demikianlah Artikel Validasi Form dengan jQuery Validation
Sekianlah artikel Validasi Form dengan jQuery Validation kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Validasi Form dengan jQuery Validation dengan alamat link https://dev-create.blogspot.com/2023/08/validasi-form-dengan-jquery-validation.html
