Iklan Header

projects.co.id

Tutorial Membuat Form Register Beserta Validasinya Menggunakan JavaScript

Pada kesempatan kali ini, saya akan membagikan code untuk membuat form register beserta validasi dengan javascript.

Berikut screenshoot output dari form register yang akan kita buat :
Membuat Form Register Beserta Validasi Dengan JavaScript Untuk permulaan, silakan temen-temen membuat dua folder bernama "script" dan "tema". Folder "script" digunakan untuk menyimpan file javascriptnya dengan nama "register.js", dan folder "tema" digunakan untuk menyimpan file cssnya dengan nama "register.css". Tujuannya agar code yang kita buat lebih rapi dan terstruktur.
Selanjutnya silakan temen-temen copas code di bawah ini :
register.html
<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<title>Programmer Bojonegoro</title>

<link rel="stylesheet" type="text/css" href="tema/registrasi.css">

</head>

<body>

<div class="wrapper">

<div class="header">

<h1>Programmer Bojonegoro</h1>

</div>

<div class="menu">

<ul>

<li><a href="https://programmerbojonegoro.blogspot.co.id/" target="_blank">Beranda</a></li>

<li><a href="https://programmerbojonegoro.blogspot.co.id/p/about.html" target="_blank">Profil</a></li>

<li><a href="https://tubianto.blogspot.co.id/" target="_blank">Artikel</a></li>

</ul>

</div>

<div class="content">

<script type="text/javascript" src="script/registrasi.js"></script>

<h1 class = "h1">Buat Akun Baru </h1>

<span id="error"></span>

<br>

<fieldset>

<legend>Isi Form</legend>

<form name="formulir" action="" method="post" onSubmit="return validasi()">

<div class="field">

<label for="fname">Nama Depan : </label>

<input type="text" name="fname" value='' id='fname' size="25">

<span class="missingValue" id='error1'></span>

</div>

<div class="field">

<br>

<label for="lname">Nama Belakang : </label>

<input type="text" name="lname" value='' id='lname' size="25">

<span class="missingValue" id='error2'></span>

</div>

<div class="field">

<br>

<label for="date">Tanggal Lahir : </label>

<select name="hari" value='' id='hari' onfocus ="loopDay()">

<option value=''>Tanggal</option>

</select>

<select name="bulan" value='' id='bulan'>

<option value=''>Bulan</option>

<option value="January">January</option>

<option value="Febuary">Febuary</option>

<option value="March">March</option>

<option value="April">April</option>

<option value="May">May</option>

<option value="June">June</option>

<option value="July">July</option>

<option value="August">August</option>

<option value="September">September</option>

<option value="October">October</option>

<option value="November">November</option>

<option value="December">December</option>

</select>

<select name="tahun" value='' id='tahun' onfocus ="loopYear()">

<option value=''>Tahun</option>

</select>

<span class="missingValue" id='error3'></span>

</div>

<div class="field">

<br>

<label for="gender">Jenis Kelamin : </label>

<input type="radio" name="gender" id='gender1' value="male"> Male

<input type="radio" name="gender" id='gender2' value="female"> Female

<span class="missingValue" id='error4'></span>

</div>

<div class="field">

<br>

<label for="submit">&nbsp;</label>

<input type="submit" value="Daftar" name="submit" />

</div>

</form>

</fieldset>

</div>

</div>

<div class="footer">

<h4>Copyright @Programmer_Bojonegoro</h4>

</div>

</body>

</html>
note: simpan dengan nama register.html
register.css
.wrapper{/*bagian pembungkus*/
padding:2px;/*lapisan tepi*/
width:1024px;/*lebar pembungkus*/
height:715px;/*panjang pembungkus*/
margin:auto;/*jarak tepi otomatis*/
background-color:#ebe7e0;/*warna latar belakang*/
}

.header{/*bagian judul*/
margin-top:10px;/*jarak atas*/
margin:auto;/*jarak tepi otomatis*/
width:1000px;/*lebar header*/
height:100px;/*panjang header*/
padding:10px;/*tebal lapisan tepi*/
background-color:#69d2e7;/*warna latar belakang*/
}

.header h1{/*bagian heading 1 di halaman header*/
text-align: center;/*teks rata tengah*/
font-family: sans-serif;/*jenis huruf*/
/*kode dibawah ini digunakan untuk memberi efek pada judul website*/
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
margin-bottom: 30px;/*jarak bawah*/
}

.header h3{/*bagian heading di halaman header*/
font-family: sans-serif;/*jenis huruf*/
text-align: center;/*teks rata tengah*/
}

body{/*bagian tubuh website*/
background-color: #c6d4e1;/*warna latar belakang*/
}

.menu{/*Bagian Menu Navigasi*/
margin: auto;/*jarak tepi otomatis*/
width: 1000px;/*lebar halaman menu*/
height: 50px;/*panjang halaman menu*/
padding: 10px;/*tebal lapisan tepi*/
line-height: 50px;/*mengatur posisi teks*/
background-color: #44749d;/*warna latar belakang*/
}

*{margin: 0; padding: 0;} /*mengatur ulang margin dan padding menjadi 0*/

.menu ul{/*bagian tag ul di halaman menu*/
list-style: none; /*menghilangkan style bawaan dari tag ul*/
}

.menu ul li a{/*bagian tag ul li a di halaman menu*/
float: left; /*untuk rata kiri*/
width: 150px; /*ukuran lebar menu navigasi*/
text-align: center; /*mengatur agar teks menu menjadi rata tengah*/
color: #ffffff; /*warna teks menu navigasi*/
text-decoration: none; /*agar teks menu tidak memiliki garis bawah*/
text-transform: uppercase; /*agar teks menu menjadi huruf kapital*/
}

.menu ul li a:hover {/*bagian tag ul li a di halaman menu ketika disorot*/
background-color: #666; /*Mengatur warna background ketika link disorot*/
}

.content{/*Bagian Isi*/
margin-left: 2px;/*jarak kiri*/
margin-top: 5px;/*jarak atas*/
padding: 10px;/*tebal lapisan tepi*/
width: 1000px;/*lebar halaman*/
height: 500px;/*panjang halaman*/
float: left;/*mengatur posisi halaman berada di kiri*/
background-color:#ffffff;/*warna latar belakang*/
}

.content img{/*bagian gambar dicontent3*/
display: block;/*mengunci kotak*/
margin-left: auto;/*jarak kiri otomatis*/
margin-right: auto;/*jarak kanan otomatis*/
margin-top: 20px;/*jarak atas*/
width: 400px;/*lebar*/
height: 550px;/*panjang*/
margin-bottom: 20px;/*jarak bawah*/
}

.content p{/*bagian tag paragraf di halaman content*/
font-style: times;/*jenis huruf*/
size: 5;/*ukuran huruf*/
line-height: 1.5;/*jarak antar kalimat*/
text-align: justify;/*rata kanan kiri*/
text-indent: 50px;/*membuat tab awal paragraf*/
}

.footer{/*Bagian Paling Bawah*/
padding:2px;/*tebal lapisan tepi*/
margin:auto;/*jarak tepi otomatis*/
width:1024px;/*lebar halaman*/
height:30px;/*tinggi halaman*/
background-color:#bdb8ad;/*warna latar belakang*/
}

.footer h4{/*bagian h4 dihalaman footer*/
text-align: center;/*teks rata tengah*/
}

legend{
font-size: large;
font-weight: bold;
margin-bottom: 10px;
color:black;
}

fieldset{
height: 45%;
padding-top: 5%;
background-color: white;
}

label{
float: left;
margin-right: 20px;
width: 200px;
text-align: right;
}

.field{
clear: both;
color: black;
}

.missingValue{
color: red;
font-size: small;
}
note: simpan di folder "tema" dengan nama register.css 
register.js
// JavaScript Document
function getfocusfn() {
document.getElementById("fname").focus();
}
function getfocusln() {
document.getElementById("lname").focus();
}
function getfocusm() {
document.getElementById("bulan").focus();
}
function getfocusd() {
document.getElementById("hari").focus();
}
function getfocusy() {
document.getElementById("tahun").focus();
}
function getfocusgm() {
document.getElementById("gender1").focus();
}


function loopDay()
{
var myobject = [];
for (var i = 1; i <= 31; i++)
{
myobject.push(i);
}
var select = document.getElementById("hari");
for(index in myobject)
{
select.options[select.options.length] = new Option(myobject[index], index);
}
}

function loopYear()
{
var myobject = [];
for (var i = 1980; i <= 2000; i++)
{
myobject.push(i);
}

var select = document.getElementById("tahun");
for(index in myobject)
{
select.options[select.options.length] = new Option(myobject[index], index);
}
}

function validasi(){
var namadepan = formulir.fname.value,
namabelakang = formulir.lname.value,
bln = formulir.bulan.value,
tgl = formulir.hari.value,
thn = formulir.tahun.value,
pesan = '',
g1 = document.getElementById('gender1'),
g2 = document.getElementById('gender2');

if (namadepan == '') {
pesan += document.getElementById("error").innerHTML = '- Nama Depan tidak boleh kosong'+' <u onclick="getfocusfn()" style="color:blue;cursor:pointer;">Fix it.</u>'+'<br>';
document.getElementById("error1").innerHTML = '<em>'+'* Nama Depan tidak boleh kosong'+'<em>';
}
if (namabelakang == '') {
pesan += document.getElementById("error").innerHTML = '- Nama Belakang tidak boleh kosong' +' <u onclick="getfocusln()" style="color:blue;cursor:pointer;">Fix it.</u>'+'<br>';
document.getElementById("error2").innerHTML = '<em>'+'* Nama Belakang tidak boleh kosong'+'<em>';
}
if (tgl == '' || bln == '' || thn == ''){
if (tgl == ''){
pesan += document.getElementById("error").innerHTML ='- Tanggal tidak boleh kosong' +' <u onclick="getfocusd()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
}
else if (bln == ''){
pesan += document.getElementById("error").innerHTML ='- Bulan tidak boleh kosong' +' <u onclick="getfocusm()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
}
else{
pesan += document.getElementById("error").innerHTML ='- Tahun tidak boleh kosong' +' <u onclick="getfocusy()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
}
document.getElementById("error3").innerHTML = '<em>'+'* Tanggal Lahir tidak boleh kosong' + '</em>';
}
if ((g1.checked == false ) && (g2.checked == false )){
pesan += document.getElementById("error").innerHTML = '- Jenis Kelamin tidak boleh kosong'+' <u onclick="getfocusgm()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
document.getElementById("error4").innerHTML = '<em>'+'* Jenis Kelamin tidak boleh kosong' + '</em>';
}

if (namadepan != '') {
pesan += document.getElementById("error").innerHTML = '';
document.getElementById("error1").innerHTML = '';
}
if (namabelakang != '') {
pesan += document.getElementById("error").innerHTML = '';
document.getElementById("error2").innerHTML = '';
}
if (bln != '' && tgl != '' && thn != ''){
pesan += document.getElementById("error").innerHTML = '';
document.getElementById("error3").innerHTML = '';
}
if ((g1.checked == true ) || (g2.checked == true )){
document.getElementById("error4").innerHTML = '';
}
if (pesan != '') {
document.getElementById("error").innerHTML = '<h4>'+'Terdapat Error Pada Inputan ' +'</h4>'+pesan;
}
if (pesan == ''){
alert ( "Data diri Anda berhasil disimpan\nName : "+namadepan+" "+namabelakang+"\nDate of birth : "+bln+"-"+tgl+"-"+thn+"\nGender : "+formulir.gender.value);
return true;
}
return false;
}
note: simpan di folder "script" dengan nama register.js
Berikut code lengkap apabila ingin menggabungkan file html,css dan javascript menjadi satu file saja.
signup.html
<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<title>Programmer Bojonegoro</title>

<style type="text/css">
.wrapper{/*bagian pembungkus*/
padding:2px;/*lapisan tepi*/
width:1024px;/*lebar pembungkus*/
height:715px;/*panjang pembungkus*/
margin:auto;/*jarak tepi otomatis*/
background-color:#ebe7e0;/*warna latar belakang*/
}

.header{/*bagian judul*/
margin-top:10px;/*jarak atas*/
margin:auto;/*jarak tepi otomatis*/
width:1000px;/*lebar header*/
height:100px;/*panjang header*/
padding:10px;/*tebal lapisan tepi*/
background-color:#69d2e7;/*warna latar belakang*/
}

.header h1{/*bagian heading 1 di halaman header*/
text-align: center;/*teks rata tengah*/
font-family: sans-serif;/*jenis huruf*/
/*kode dibawah ini digunakan untuk memberi efek pada judul website*/
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
margin-bottom: 30px;/*jarak bawah*/
}

.header h3{/*bagian heading di halaman header*/
font-family: sans-serif;/*jenis huruf*/
text-align: center;/*teks rata tengah*/
}

body{/*bagian tubuh website*/
background-color: #c6d4e1;/*warna latar belakang*/
}

.menu{/*Bagian Menu Navigasi*/
margin: auto;/*jarak tepi otomatis*/
width: 1000px;/*lebar halaman menu*/
height: 50px;/*panjang halaman menu*/
padding: 10px;/*tebal lapisan tepi*/
line-height: 50px;/*mengatur posisi teks*/
background-color: #44749d;/*warna latar belakang*/
}

*{margin: 0; padding: 0;} /*mengatur ulang margin dan padding menjadi 0*/

.menu ul{/*bagian tag ul di halaman menu*/
list-style: none; /*menghilangkan style bawaan dari tag ul*/
}

.menu ul li a{/*bagian tag ul li a di halaman menu*/
float: left; /*untuk rata kiri*/
width: 150px; /*ukuran lebar menu navigasi*/
text-align: center; /*mengatur agar teks menu menjadi rata tengah*/
color: #ffffff; /*warna teks menu navigasi*/
text-decoration: none; /*agar teks menu tidak memiliki garis bawah*/
text-transform: uppercase; /*agar teks menu menjadi huruf kapital*/
}

.menu ul li a:hover {/*bagian tag ul li a di halaman menu ketika disorot*/
background-color: #666; /*Mengatur warna background ketika link disorot*/
}

.content{/*Bagian Isi*/
margin-left: 2px;/*jarak kiri*/
margin-top: 5px;/*jarak atas*/
padding: 10px;/*tebal lapisan tepi*/
width: 1000px;/*lebar halaman*/
height: 500px;/*panjang halaman*/
float: left;/*mengatur posisi halaman berada di kiri*/
background-color:#ffffff;/*warna latar belakang*/
}

.content img{/*bagian gambar dicontent3*/
display: block;/*mengunci kotak*/
margin-left: auto;/*jarak kiri otomatis*/
margin-right: auto;/*jarak kanan otomatis*/
margin-top: 20px;/*jarak atas*/
width: 400px;/*lebar*/
height: 550px;/*panjang*/
margin-bottom: 20px;/*jarak bawah*/
}

.content p{/*bagian tag paragraf di halaman content*/
font-style: times;/*jenis huruf*/
size: 5;/*ukuran huruf*/
line-height: 1.5;/*jarak antar kalimat*/
text-align: justify;/*rata kanan kiri*/
text-indent: 50px;/*membuat tab awal paragraf*/
}

.footer{/*Bagian Paling Bawah*/
padding:2px;/*tebal lapisan tepi*/
margin:auto;/*jarak tepi otomatis*/
width:1024px;/*lebar halaman*/
height:30px;/*tinggi halaman*/
background-color:#bdb8ad;/*warna latar belakang*/
}

.footer h4{/*bagian h4 dihalaman footer*/
text-align: center;/*teks rata tengah*/
}

legend{
font-size: large;
font-weight: bold;
margin-bottom: 10px;
color:black;
}

fieldset{
height: 45%;
padding-top: 5%;
background-color: white;
}

label{
float: left;
margin-right: 20px;
width: 200px;
text-align: right;
}

.field{
clear: both;
color: black;
}

.missingValue{
color: red;
font-size: small;
}
</style>

</head>

<body>

<div class="wrapper">

<div class="header">

<h1>Programmer Bojonegoro</h1>

</div>

<div class="menu">

<ul>

<li><a href="https://programmerbojonegoro.blogspot.co.id/" target="_blank">Beranda</a></li>

<li><a href="https://programmerbojonegoro.blogspot.co.id/p/about.html" target="_blank">Profil</a></li>

<li><a href="https://tubianto.blogspot.co.id/" target="_blank">Artikel</a></li>

</ul>

</div>

<div class="content">

<script type="text/javascript">
// JavaScript Document
function getfocusfn() {
document.getElementById("fname").focus();
}
function getfocusln() {
document.getElementById("lname").focus();
}
function getfocusm() {
document.getElementById("bulan").focus();
}
function getfocusd() {
document.getElementById("hari").focus();
}
function getfocusy() {
document.getElementById("tahun").focus();
}
function getfocusgm() {
document.getElementById("gender1").focus();
}


function loopDay()
{
var myobject = [];
for (var i = 1; i <= 31; i++)
{
myobject.push(i);
}
var select = document.getElementById("hari");
for(index in myobject)
{
select.options[select.options.length] = new Option(myobject[index], index);
}
}

function loopYear()
{
var myobject = [];
for (var i = 1980; i <= 2000; i++)
{
myobject.push(i);
}

var select = document.getElementById("tahun");
for(index in myobject)
{
select.options[select.options.length] = new Option(myobject[index], index);
}
}

function validasi(){
var namadepan = formulir.fname.value,
namabelakang = formulir.lname.value,
bln = formulir.bulan.value,
tgl = formulir.hari.value,
thn = formulir.tahun.value,
pesan = '',
g1 = document.getElementById('gender1'),
g2 = document.getElementById('gender2');

if (namadepan == '') {
pesan += document.getElementById("error").innerHTML = '- Nama Depan tidak boleh kosong'+' <u onclick="getfocusfn()" style="color:blue;cursor:pointer;">Fix it.</u>'+'<br>';
document.getElementById("error1").innerHTML = '<em>'+'* Nama Depan tidak boleh kosong'+'<em>';
}
if (namabelakang == '') {
pesan += document.getElementById("error").innerHTML = '- Nama Belakang tidak boleh kosong' +' <u onclick="getfocusln()" style="color:blue;cursor:pointer;">Fix it.</u>'+'<br>';
document.getElementById("error2").innerHTML = '<em>'+'* Nama Belakang tidak boleh kosong'+'<em>';
}
if (tgl == '' || bln == '' || thn == ''){
if (tgl == ''){
pesan += document.getElementById("error").innerHTML ='- Tanggal tidak boleh kosong' +' <u onclick="getfocusd()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
}
else if (bln == ''){
pesan += document.getElementById("error").innerHTML ='- Bulan tidak boleh kosong' +' <u onclick="getfocusm()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
}
else{
pesan += document.getElementById("error").innerHTML ='- Tahun tidak boleh kosong' +' <u onclick="getfocusy()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
}
document.getElementById("error3").innerHTML = '<em>'+'* Tanggal Lahir tidak boleh kosong' + '</em>';
}
if ((g1.checked == false ) && (g2.checked == false )){
pesan += document.getElementById("error").innerHTML = '- Jenis Kelamin tidak boleh kosong'+' <u onclick="getfocusgm()" style="color:blue;cursor:pointer;">Fix it.</u>'+ '<br>';
document.getElementById("error4").innerHTML = '<em>'+'* Jenis Kelamin tidak boleh kosong' + '</em>';
}

if (namadepan != '') {
pesan += document.getElementById("error").innerHTML = '';
document.getElementById("error1").innerHTML = '';
}
if (namabelakang != '') {
pesan += document.getElementById("error").innerHTML = '';
document.getElementById("error2").innerHTML = '';
}
if (bln != '' && tgl != '' && thn != ''){
pesan += document.getElementById("error").innerHTML = '';
document.getElementById("error3").innerHTML = '';
}
if ((g1.checked == true ) || (g2.checked == true )){
document.getElementById("error4").innerHTML = '';
}
if (pesan != '') {
document.getElementById("error").innerHTML = '<h4>'+'Terdapat Error Pada Inputan ' +'</h4>'+pesan;
}
if (pesan == ''){
alert ( "Data diri Anda berhasil disimpan\nName : "+namadepan+" "+namabelakang+"\nDate of birth : "+bln+"-"+tgl+"-"+thn+"\nGender : "+formulir.gender.value);
return true;
}
return false;
}
</script>

<h1 class = "h1">Buat Akun Baru </h1>

<span id="error"></span>

<br>

<fieldset>

<legend>Isi Form</legend>

<form name="formulir" action="" method="post" onSubmit="return validasi()">

<div class="field">

<label for="fname">Nama Depan : </label>

<input type="text" name="fname" value='' id='fname' size="25">

<span class="missingValue" id='error1'></span>

</div>

<div class="field">

<br>

<label for="lname">Nama Belakang : </label>

<input type="text" name="lname" value='' id='lname' size="25">

<span class="missingValue" id='error2'></span>

</div>

<div class="field">

<br>

<label for="date">Tanggal Lahir : </label>

<select name="hari" value='' id='hari' onfocus ="loopDay()">

<option value=''>Tanggal</option>

</select>

<select name="bulan" value='' id='bulan'>

<option value=''>Bulan</option>

<option value="January">January</option>

<option value="Febuary">Febuary</option>

<option value="March">March</option>

<option value="April">April</option>

<option value="May">May</option>

<option value="June">June</option>

<option value="July">July</option>

<option value="August">August</option>

<option value="September">September</option>

<option value="October">October</option>

<option value="November">November</option>

<option value="December">December</option>

</select>

<select name="tahun" value='' id='tahun' onfocus ="loopYear()">

<option value=''>Tahun</option>

</select>

<span class="missingValue" id='error3'></span>

</div>

<div class="field">

<br>

<label for="gender">Jenis Kelamin : </label>

<input type="radio" name="gender" id='gender1' value="male"> Male

<input type="radio" name="gender" id='gender2' value="female"> Female

<span class="missingValue" id='error4'></span>

</div>

<div class="field">

<br>

<label for="submit">&nbsp;</label>

<input type="submit" value="Daftar" name="submit" />

</div>

</form>

</fieldset>

</div>

</div>

<div class="footer">

<h4>Copyright @Programmer_Bojonegoro</h4>

</div>

</body>

</html>

Berlangganan update artikel terbaru via email:

0 Response to "Tutorial Membuat Form Register Beserta Validasinya Menggunakan JavaScript"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel