Membuat Validasi Form Menggunakan Javascript

Home

Membuat Validasi Form Menggunakan Javascript

Posted by : Unknown Tuesday, December 3, 2013

Postingan ini muncul dari tugas kuliah seminggu yang lalu, tugasnya bikin validasi form pake Javascript. Mana tau, postingan ini bisa jadi referensi bagi teman-teman yang mau bikin validasi form. Kira-kira soalnya kayak gini :

Ketentuan pengisian form.
- Field tidak boleh kosong.
- No. BP; berupa 10 angka.
- Umur; harus angka positif.
- Email; sesuai dengan format email terdapat karakter "@" dan karakter "."

Berhubung gue lumayan nggak ngerti sama javascript, berbekal akses internet dan bantuan Eyang Google, akhirnya nemu juga contoh-contoh Javascript untuk validasi form. Setelah dipilih-pilih, dipotong, diaduk-aduk, dicampur dan dioven akhirnya tugas gue mateng *eh.

Sedikit penjelasan untuk pencarian pola dari data yang diinput, gue make fungsi "Regex". Apa itu Regex ? Regrex singkatan dari Regular Expression yang digunakan untuk membuat pola/pattern dalam suatu rangkaian string. Untuk penjelasan lebih lengkap teman-teman bisa baca disini.

Langsung aja, tampilan dari script yang gue buat kayak gini.

File Javascript-nya.

File CSSnya

<style>

body, td.s

{

text-align:left;

font-family:myFirstFont;

line-height: 40px; text-transform: uppercase;

}

@font-face

{

    font-family: myFirstFont;

    src: url(Hand_Of_Sean_Demo.ttf);

    font-weight:bold;

}

input, select {

    font-family:myFirstFont;

    border: none;

    background: transparent;

    -webkit-appearance: none;

}

span.help {

    font-size: 12px;

    color:red;

    font-style:italic;

}

table

{

    border:0px solid;

    margin:auto;

}

h1{

    text-align:center;

}

#background

{

    background:url("paper.jpg");

    background-repeat: no-repeat;

    background-size:100%;

}

.s{

border: 2px solid;

}

</style>

Ini script HTMLnya.