Membuat validasi form input email dengan javascript

hello kabar baik semua,. sudah lama saya ga posting lagi,. di posting kali ini mungkin agan udah banyak yang tahu.., mungkin ini sebagai rekomendasi saja dan semoga saja skrip yang saya bikin ini sesuai apa yang agan butuhkan.

okey kita langsung aja membahasnya, di posting kali ini saya akan membuat validasi form input email yang manakala sulit bagi yang awam, tapi sangat berguna bagi yang ingin mencoba script saya ini
okay kita mulai siapkan aplikasi editor yang agan sukai . klo saya boleh saranin agan sebaiknya menggunakan aplikasi notepad++ yah mungkin ini akan lebih praktis klo menurut saya hahaha..,

okay deh !! lanjut ke langkah selanjutnya hidupkan server lokal agan,. tapi untuk kali ini ga usah juga ga pa" karena saya menggunakan javascript untuk membuat validasi input.a

kita ke pembahasannya sekarang.., agan siap mengetik atau sudah siap mau mengkopi skrip saya.., hehe.. okay lah  klo begitu terserah agan dah.., yang penting bisa lebih cepat membantu menyelesaikan hajat yang agan butuhkan..,

langkah pertama :
  1. buka aplikasi editornya klik new file
  2. hidupkan aplikasi browser 
  3. hidupkan xampp nya atau apache server agan
  4. ketik coding berikut ini
Kode HTML untuk membuat form input :

<form method="POST" action="aksi_order.php" onSubmit="return validasi(this)" >
                <input type="hidden" name="id_layanan" value="<?php echo $data[id_layanan]; ?>" >
                <label for="Name">Nama Anda *)</label><input type="text" name="nama">
                <label for="Email">Email *)</label><input type="text" name="email">
                <label for="Phone">Phone *)</label><input type="text" name="telp" onkeyup="angka(this);" onkeypress="angka(this);">
                <label for="Fax">Alamat *)</label><input type="text" name="alamat" >
                <label for="Message">Detail Order *)</label><textarea name="detail_order" rows="5" cols="25"></textarea>
                <input type="submit" name="submit" value="Order Now" />
                </form>

perhatikan skript ini " onSubmit="return validasi(this)" "ini berfungsi untuk menghubungkan submit saat ditekan dan maka akan menghidupkan skript javascript berikut ini

Kode JavaScript untuk validasi form input :

<script>
function validasi(form){
 var mincar = 3;
  pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (form.nama.value == ""){
        alert("Anda belum mengisikan Nama.");
        form.nama.focus();
        return (false);
    }
    if (form.nama.value.length < mincar){
    alert("Panjang nama Minimal 3 Karater!");
    form.nama.focus();
    return (false);
    }
    if (form.email.value == ""){
        alert("Anda belum mengisikan Email.");
        form.email.focus();
        return (false);
    }
    if (!pola_email.test(form.email.value)){
    alert ('Penulisan Email tidak benar');
    form.email.focus();
    return (false);
  }
    if (form.telp.value == ""){
        alert("Anda belum mengisikan No Telephone.");
        form.telp.focus();
        return (false);
    }
    if (form.alamat.value == ""){
        alert("Anda belum mengisikan Alamat.");
        form.alamat.focus();
        return (false);
    }
    if (form.detail_order.value == ""){
        alert("Anda belum mengisikan Detail Order.");
        form.detail_order.focus();
        return (false);
    }
    return (true);
}

function angka(e) {
   if (!/^[0-9]+$/.test(e.value)) {
      e.value = e.value.substring(0,e.value.length-1);
   }
}
</script>

klo agan sudah mengetik atau copass punya saya silahkan agan bikin dalam satu file: dengan nama terserah agan tp saya saranin dengan nama : index.html

ohh yah jangan lupa kata seperti ini pada form '' action="aksi_order.php" " ini untuk membuat inputan agar masuk ke database agan dan untuk mengetahuinya tunggu posting selanjutnya.., okay deh akhirnya selesai juga posting kali ini., selamat bekerja.., kata jokowi hehhe..,

Komentar

Postingan populer dari blog ini

cara membuat checkbox pada listview vb.net dan dapat di pilih sesuai checkbox yang dipilih

membuat menu jquery bootstrap tanpa reload page

menampilkan data pada power point menggunakan program visual studio 2010