Cara menggunakan FORM.VALIDATE pada JavaScript

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.



    
    
    
        function cekemail[email]{
            if[email.indexOf["@"]!=-1 && email.indexOf["."]!=-1]{
                alert["ini adalah email"];
            }
            else{
                alert["ini bukan email"];
            }
        }
    



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".

ZRACODER13





















Username
Email
Password
Confirm Password













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;
}

.body {
width: 70%;
margin: 0 auto;
padding: 0px;
}

.content {
margin: 222px auto ;
width:50%;
height: 25%;
background-color: #666;
border-radius: 10px;
}

.header {

padding: 0px;
width: 100%;
border-radius: 10px 10px 0px 0px;
background-color:#E98758;
}

.header p {
padding: 0px 20px;
font-weight: bold;
display: inline-block;
color:#272822;
}

.header a {
margin-left: 200px;
text-decoration: none;
font-size: 12px;
color: #666;
}

.header a:hover {
color: #000;
transition: 1s;
font-weight: bold;
}

table {
padding: 5px 10px;
color: #f5f5f5;
}

input {
border-radius: 5px;
height: 25px;
width: 200px;
}

input:focus {
height: 30px
width:210px;
}

.pesan-confirm {

}

.footer-table {
background-color: silver;
border-radius: 0px 0px 5px 5px;
display: inline-block;
width: 100%;
height: 40px;

}

.footer-table input {
margin: 0 auto;
height: 40px;
width: 100%;
border-radius: 0 0 5px 5px;
border:none;
font-family: Arial;
background-color: #E98758;
color: #272822;
font-weight: bold;
}

.footer-table input:hover {
background-color: #666;
color: #E98758;
transition: 1s;
border:none;
}

Save dengan nama file “style.css

Untuk script javascriptnya

//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

Bài mới nhất

Chủ Đề