Basit Form Doğrulama Örneği - Javascript

İsim soyisim bilgisi girilmediği zaman uyarı veren bir javascript örneği aşağıda verilmiştir.

Dosyalar

index.html


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript Form Doğrulama Örneği</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<form id="mainform">
		<table>
		<tr>
			<td>Name</td>
			<td><input type="text" id="name" name="Name" /></td>
		</tr>
		<tr>
			<td>Lastname</td>
			<td><input type="text" id="lastname" name="Lastname"/></td>
		</tr>
		<tr>
			<td>Department</td>
			<td>
			<select id="department" name="Department">
				<option value="0">Select Department</option>
				<optgroup label="Finance">
					<option value="1">Accounting</option>
					<option value="2">Payment Unit</option>
					<option value="6">Billing Unit</option>
					<option value="3">Return Unit</option>
				</optgroup>
				<optgroup label="Meintenance">
					<option value="4">Technical Service</option>
					<option value="5">Delivery Unit</option>
				</optgroup>
			</select>
			</td>
		</tr>
		<tr>
			<td><input type="button" id="submitBtn" value="Send"></td>
			<td><input type="button" id="clearForm" value="Clear"></td>
		</tr>
		</table>
	</form>

	<script type="text/javascript" src="dosya.js"></script>
</body>
</html>

dosya.js


document.getElementById("submitBtn").addEventListener('click', send);
document.getElementById("clearForm").addEventListener('click', clear);

//--------------------------------------------------
//submitBtn id değerine sahip elemente tıklandığında
//formdaki verilerin gönderilmesini sağlayacak.
//--------------------------------------------------
function send() {
	validate();
	//document.getElementById("mainform").submit();
}

//--------------------------------------------------
//clearForm id değerine sahip elemente tıklandığında
//mainform id değerine sahip form elementi içindeki 
//tüm elementlerin içeriği temizlenecek.
//--------------------------------------------------
function clear() {
	document.getElementById("mainform").reset();
}

var validateMessage = "";
function validate() {
	var form = document.getElementById('mainform');
	var formElements = form.elements;

	for(var i=0; i<formElements.length; i++) {
		var element = formElements[i];
		if(element.type === "text" && element.value.length <= 0) {
			validateMessage += element.name + " boş bırakılamaz." + "";
		}
	}

	if(validateMessage.length > 0) {
		alert(validateMessage + "Gerekli alanları doldurunuz.");
	}
	validateMessage = "";
}

İndirme Bağlantısı

Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir

Etiketler

javascript