Validasi Form Dengan Regex Jquery - Ilmu Komputer

Tentang komputer, tips, trik, artikel, tutorial!

Sabtu, 19 April 2014

Validasi Form Dengan Regex Jquery

Validasi Form Dengan Regex Jquery
Validasi Form Dengan Regex Jquery- Validasi form dengan jquery menggunakan regex, regular expresion, kali ini saya mau berbagi bagaimana cara membuat validasi form dengan jquery, jquery.validate ,  apa itu validasi? validasi berguna untuk menangani data yang dimasukkan kedalam suatu form sudah benarkah atau masih salah, jika tidak ada validasi maka data yang dimasukkan akan terinput semua kedalam database, mungkin dengan cara ini masih bisa di akali oleh si user karena sifatnya bukan server side, mudah-mudahan kedepan saya akan share validasi untuk server side, validasi dengan form php.

Oke sekarang kita masuk kedalam pokok bahasan, silahkan ikuti tutorial dibawah ini, mungkin sobat ingin membaca ebook regex disini 

Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$.validator.addMethod("email", function(value, element) 
{ 
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value); 
}, "Please enter a valid email address.");

$.validator.addMethod("username",function(value,element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value); 
},"Username are 3-15 characters");

$.validator.addMethod("password",function(value,element)
{
return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value); 
},"Passwords are 6-16 characters");

// Validate signup form
$("#signup").validate({
rules: {
email: "required email",
username: "required username",
password: "required password",
},
});
});
</script>

HTML
<form method="post" action="thank.html" name="signup" id="signup">
Email<br />
<input type="text" name="email" id='email'/><br />
UserName<br />
<input type="text" name="username" id="username" /><br />
Password<br />
<input type="password" name="password" id="password" /><br />
<input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>
</form>

CSS
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
input
{
width:220px;
height:25px;
font-size:13px;
margin-bottom:10px;
border:solid 1px #333333;
}
label.error 
{
font-size:11px;
background-color:#cc0000;
color:#FFFFFF;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px; 
}

Sekian tutorial Validasi Form Dengan Regex Jquery hari ini, silahkan sedot saja disini, semoga bisa dimanfaatkan bagi sobat-sobat semua, jangan lupa coretannya ya sobat, sobat coret saya coret balik :D

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Validasi Form Dengan Regex Jquery

  • Membuat Multi Login Menggunakan Codeigniter- Part2Membuat Multi Login Menggunakan Codeigniter- Part2, berikut adalah update dari posting sebelumnya yaitu Membuat Multi Login Menggunakan Codeigniter- Part1 dari 3, s ...
  • Tutorial How To Decode PHP Base64 $o VariableJika anda menemukan encode base64 yang menggunakan variabel $o maka cara ini bisa anda gunakan, contoh program website yang menggunakan encode base64 adalah program Syst ...
  • SISTEM APLIKASI TRAVEL DENGAN ANGULARJS DAN CODEIGNITERDownload buku Angular JS dengan Codeigniter, jika anda ingin mencoba aplikasi desktop/exe dengan PHP silahkan coba aplikasi ini, aplikasi ini merupakan isi buku yan ...
  • Advanced Data Table MySQL Salam blogger indonesia, kali ini saya akan berbagi data tabel yang menggunakan database mysql, saya persembahkan untuk sobat saya +Ryan Syahputera  dan mas& ...
  • Cara Menghapus Ikon Merah di PHPMyadmin Cara Menghapus  Ikon Merah di PHPMyadmin - Ini biasanya terjadi setelah anda mengupdate phpmyadmin, untuk lebih jelasnya silahkan lihat gambar berikut ini: J ...

8 komentar:

  1. wah lumayan banyak juga mas kodenya. Pusing kalau bicara soal kode scritp html jquery :D

    BalasHapus
  2. Wah saya ngga ngerti sama sekali mas heheh, maklum Newbie :D

    BalasHapus
  3. Wah bisa saya terapkan dalam blog nih, untuk membuat ada komunikasi timbal balik dari penulis dengan pembacanya, makasih banyak.

    BalasHapus
    Balasan
    1. iya pak, dtunggu kunjungan berikutnya :D

      Hapus
  4. nah nih mau dipelajari dulu mas :D

    BalasHapus
  5. sama pusing juga lihat kodenya..tapi makasih ya infonya gan..
    jangan lupa bergabung bersama kami di www.sundulbet.com

    BalasHapus

Berkomentarlah dengan baik dan sopan..
Terimah kasih sudah berkunjung