Buat file dengan nama latihan.html, karena kita menggunakna javascript anda dapat melatakkan filenya disembarang tempat, jadi tidak perlu dimasukkan ke htdocs. Copy paste script di bawah ini, lalu save.
Penjelasan kita membuat sebuah form sederhana yang terdiri dari input text dan button. saat kita mengklik button, maka fungsi cekemail otomatis akan dipanggil dan akan mengecek data yang diinput oleh user. Jika data yang diinput mengandung tanda @ dan ., maka browser akan menampilkan alerbox bertulisan "ini adalah email" dan jika salah satu syarat di atas tidak terpenuhi atau keduannya tidak terpenuhi maka browser akan menampilkan alertbox bertulisan "ini bukan email"
Coba anda jalankan di browser, cari file latihan.html, klik kanan dan buka dengan browser yang sering anda gunakan. Hasilnya akan tempak seperti gambar di bawah ini.jika anda memasukkan email yang benar maka, akan menampilkan alert box bertulisan "ini adalah email".
Alert Box jika email yang dimasukkan benar
Atau jika anda memasukkan email yang salah maka akan menampilkan alert box bertullisan "ini bukan email"
Alert Box jika email yang dimasukkan salah
Ok, sekian tutorial membuat validasi email dengan menggunakan javascript, mudah-mudahan bermanfaat bagi kita semua. Ada kesulitan, atau ada error silahkan tanyakan di kolom komentar di bawah ini. Happy coding!!!
Langsung saja ini adalah script htmlnya, copas ke text editor agan agan jangan lupa Save smua file dalam satu folder yang sama
Tutorial Membuat Verifikasi 2 Password | ZRACODER13
Copy kode diatas dan save dengan nama index.php ,jangan lupa mengaktifkan “Apache”,karena disini saya meletakan di htdocs di software web server agan / tidak juga gapapa sih.
untuk script css
body { background-color: #f5f5f5; font-family: sans-serif; }
//validasi inputan form ketika kosong atau belum memenuhi suatu peraturan tertentu function validasi_input(form){ var minchar = 8; //membuat minimal char dari inputan username pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/; //membuat pattern inputan email
//validasi dimulai if (form.username.value=="") { alert("Username Harus Diisi!"); form.username.focus(); return (false);
} else if (form.username.value.length <= minchar) { alert("Username Harus Lebih dari 8 Karakter!"); form.username.focus(); return (false); }else if (form.email.value=="") { alert("Email Harus Diisi!"); form.username.focus(); return (false); } else if (!pola_email.test(form.email.value)){ alert ('Penulisan Email tidak benar'); form.email.focus(); return (false); } else if (form.password_1.value==""){ alert("Password Tidak Boleh kosong!"); form.password.focus(); return (false); } else if (form.password_2.value==""){ alert("Password Tidak Boleh kosong!"); form.password_ulangi.focus(); return (false); } else { return (true); } }
//membuat validasi password 1 dan password 2 (pencocokan) function checkPass() {
//mengambil object dan dimasukan ke variabel var pass_1 = document.getElementById('password_1'); var pass_2 = document.getElementById('password_2'); //mengambil object dan dimasukan ke variabel var message = document.getElementById('pesan'); //inisialisasi warna didalam variabel var warnabenar = "#66cc66"; var warnasalah = "#ff6666"; //membandingkan 2 variabel if(pass_1.value == pass_2.value){ //ketika password benar //ubah menjadi warna jelek //memeberi peringatanya bahwa benar document.validasi_form.daftar_process.disabled=false; pass_2.style.backgroundColor = warnabenar; message.style.color = warnabenar; message.innerHTML = "" }else{ //ini ketika password tidak cocok //ubah menjadi warna jelek //memeberi peringatanya bahwa salah dengan tanda seru document.validasi_form.daftar_process.disabled = true; alert("Password tidak Cocok!"); pass_2.style.backgroundColor = warnasalah; message.style.color = warnasalah; message.innerHTML = "!" } }
Save dengan nama file “validasi.js”
Masih bingung?..gue kasih penjelasanya
<formaction="bla.php"method="post"
body { background-color: #f5f5f5; font-family: sans-serif; }
Kita membuat struktur form dengan method=”post”, berfungsi agar data yang kita inputkan akan dikirimkan ke file tujuan (action) , dan onsubmit=”return validasi_input(this)”, berfungsi membuat perintah ketika tipe submit di bagian form kita telah klik / diakses .
Password
Confirm Password
onchange=”checkpass()” berfungsi menjalankan fungsi “checkpass()” ketika form inputan baru saja diisi , dan membuat untuk memberikan notifikasinya apakah password verifikasinya cocok atau tidak
function validasi_input(form){ var minchar = 8; //membuat minimal char dari inputan username pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/; //membuat peraturan inputan email
variabel minchar,memberi batasan minimal input pada kolom inputan username 8 karakter pola_email,berfungsi memberi format inputan untuk kolom inputan email
if (form.username.value=="") { alert("Username Harus Diisi!"); form.username.focus(); return (false);
if diatas berfungsi “jika isi dari kolom username form validasi_input kosong,maka akan ada notifikasi berupa popup Username Harus diisi!” , untuk fungsi ini , format pengambilanya menggunakan nama bukan id
//mengambil object dan dimasukan ke variabel var pass_1 = document.getElementById('password_1'); var pass_2 = document.getElementById('password_2'); //mengambil object dan dimasukan ke variabel var message = document.getElementById('pesan'); //inisialisasi warna didalam variabel var warnabenar = "#66cc66"; var warnasalah = "#ff6666"; //membandingkan 2 variabel if(pass_1.value == pass_2.value){ //ketika password benar //ubah menjadi warna jelek //memeberi peringatanya bahwa benar dengan komentar kosong namun warna box hijau document.validasi_form.daftar_process.disabled=false; pass_2.style.backgroundColor = warnabenar; message.style.color = warnabenar; message.innerHTML = "" }else{ //ini ketika password tidak cocok //ubah menjadi warna jelek //memeberi peringatanya bahwa salah dengan tanda seru document.validasi_form.daftar_process.disabled=true; alert('Password tidak cocok!'); pass_2.style.backgroundColor = warnasalah; message.style.color = warnasalah; message.innerHTML = "!" }
Untuk kode diatas sudah ada penjelasanya . Untuk tambahan , pengambilan data dari “validasi_input()” tepatnya “document.validasi_form.daftar_proccess.disabeld=true;” menggunakan data dari inputan tipe submit ..
Oke..segitu saja mungkin dari gue..Jika gue ada yang salah ,dan jika masih ada yang bingung,,agan-agan bisa bertanya juga
BTW kenapa itu banyak tulisan codingblog13 dan zracoder13..karena gue blogger juga,bisa dicek di www.zracoder13.com ,jhehe
Apa itu form validasi?
Apa itu Form Validation? Form validation adalah proses validasi data input yang diinputkan dari form. Proses validasi ini biasanya dilakukan di Controller dan menggunalan library form_validation .
Apa itu input validasi?
Validasi input dilakukan untuk memastikan data yang diisi oleh user sesuai dengan apa yang dibutuhkan oleh aplikasi. Pada kasus halaman login terdapat minimal 2 input yang harus Anda validasi. Pertama adalah inputan email dan yang kedua adalah inputan kata sandi atau password.
Apa itu validasi di laravel?
Validasi atau validation dalam istilah pemrograman adalah proses pengecekan data yang masuk.
