Validasi Form Menggunakan Javascript

Validasi adalah hal yang penting di dalam sebuah aplikasi, terutama ketika mengharuskan user untuk menginput suatu nilai ke dalam aplikasi tersebut.

Salah satu contoh validasi dapat anda temui pada form biodata di sebuah website. Untuk mengisi form biodata, user harus diarahkan agar tidak melakukan kesalahan dalam melakukan input data. Jika form tersebut menggunakan platform web, maka Javascript adalah salah satu cara alternatif untuk melakukan validasi.

Validasi Form Menggunakan Javascript

Berikut ini saya berikan contoh form menggunakan javascript sederhana yang biasa anda temui ketika mengisi form pendaftaran di suatu website.

<html>
<head>
<title>Javascript Form Validation Example</title>
<script language="javascript" type='text/javascript'>

function validasi(){

	var nama = document.getElementById('nama');
	var alamat = document.getElementById('alamat');
	var kodepos = document.getElementById('kodepos');
	var status = document.getElementById('status');
	var username = document.getElementById('username');
	var email = document.getElementById('email');

	if(isAlphabet(nama, "Nama hanya berisi huruf!")){
		if(isAlphanumeric(alamat, "Alamat hanya berisi huruf dan angka!")){
			if(isNumeric(kodepos, "Kode pos hanya berisi angka!")){
				if(madeSelection(status, "Status belum dipilih!")){
					if(lengthRestriction(username, 6, 8)){
						if(emailValidator(email, "Email anda salah!")){
							return true;
						}
					}
				}
			}
		}
	}

	return false;

}

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus();
		return false;
	}
	return true;
}

function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function isAlphanumeric(elem, helperMsg){
	var alphaExp = /^[0-9a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function lengthRestriction(elem, min, max){
	var uInput = elem.value;
	if(uInput.length >= min && uInput.length <= max){
		return true;
	}else{
		alert("Harap isikan di antara " +min+ " dan " +max+ " karakter");
		elem.focus();
		return false;
	}
}

function madeSelection(elem, helperMsg){
	if(elem.value == "Pilih Status"){
		alert(helperMsg);
		elem.focus();
		return false;
	}else{
		return true;
	}
}

function emailValidator(elem, helperMsg){
	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	if(elem.value.match(emailExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}
</script>
</head>
<body>
<form id="biodata-form" method="post" onsubmit='return validasi()'>
                            <table id="tabel-biodata"> 
                                <tr>
                                    <td>Nama</td>
                                    <td><input type="text" id="nama" value="" maxlength="1024"/></td>
                                </tr>
                                <tr>
                                    <td>Alamat</td>
                                    <td><input type="text" id="alamat" value="" maxlength="1024"/></td>
                                </tr>
                                <tr>
                                    <td>Kode Pos</td>
                                    <td><input type="text" id="kodepos" value="" maxlength="1024"/></td>
                                </tr>
                                <tr>
                                    <td>Status</td>
                                    <td>
										<select id='status'>
											<option>Pilih Status</option>
											<option>Kawin</option>
											<option>Belum Kawin</option>
										</select>
									</td>
                                </tr>
                                <tr>
                                    <td>Username</td>
                                    <td><textarea id="username" value="" style="height: 100px;"></textarea></td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td><input type="text" id="email" value="" maxlength="1024"/></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><input type="submit" value="Simpan" class="button"/></td>
                                </tr>
                            </table>
                        </form>
</body>
</html>

Selamat mencoba!

2 thoughts on “Validasi Form Menggunakan Javascript”

  1. terimakasih, sangat bermanfaat, tetapi ada masalah saat nama diisi nama panjang (mengandung spasi), solusinya bagaimana?

    Reply
  2. halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. smoga kakak dapat terus berkarya dlm membuat artikel” pada website.. sukses slalu kak.. perkenalkan nama saya meren, mahasiswi dari STMK Atma Luhur Pangkalpinang.. ini website kampus saya https://www.atmaluhur.ac.id/

    Reply

Leave a Comment