Form Validator

Web sayfalarında kullanıcıdan bilgi almak için konulan yazı alanı, seçenek kutusu, onay kutusu, düğme vs.. bileşenlerden oluşan gruba form denir. Form'daki bilgiler kullanıcı tamam deyince bilgilerin değerlendirilip cevap verileceği servera gönderilir. Bilgilere göre server yeni bir web sayfası oluşturur ve geri gönderir. Kullanıcı form bilgilerini gönderme işini submit düğmesine tıklayarak yapar. Submit düğmesine basıldığında browser formun action özelliğindeki cgi programına (servardaki verileri değerlendirecek program) verileri gönderir. Eğer gönderilmeden önce javascriptte işlemler yapmak istiyorsanız formun onSubmit özelliğini yakalamanız gerekir. Aşağıdaki örnekte form submit edilince(verilerin karşı tarafa gönderilme işlemi başladığında) javascript ile devreye giriyoruz ve bilgilerin gönderilip gönderilmeyeceğine karar veriyoruz. Eğer tel alanı bossa result false oluyor.

  1 <html>
  2 <head>
  3 	<script>
  4 		function check(){
  5 			result=true//tel alanının boş olup olmadığını kontrol edildi ve sonuc geldi;
  6 			if(result){
  7 				return true;
  8 			}else{
  9 				return false;
 10 			}		
 11 		}
 12 	</script>
 13 </head>
 14 <body>
 15 	<form action="test.jsp" onSubmit="return check()">
 16 		<input type="text" size="12" name="tel">
 17 		<input type="submit" value=" OK ">
 18 	</form>
 19 </body>
 20 </html>

onSubmit ile submit olayını yakaladık ve check fonksiyonunu çağırdık. Telefon alanına girilip girilmediğini anladık. Eğer girilmişse result true olur ve true döndürülür ve form verisi gönderilir. Aksi takdirde form verisi gönderilmez

form validator sistemi

Bu projenin temeli AbstractFormValidator nesnesidir. AbstractFormValidator nesnesi bu proje için yapılmıştır. Bu nesneye parametre olarak bir form,control edilecek form elementlerinin adları,ve kontrol ederken çağıracağı fonksiyon verilir. Parametreler verildikten sonra bu nesnenin validate metodu çağrılır. Eğer form yanlış doldurulmuşsa alert ile mesaj basılır ve false döndürülür. Eğer doğru doldurulmuşsa true döndürülür.

AbstractFormValidator en başta kontrol edilecek olan form nesnesini ister. AbstractFormValidator sadece parametre olarak verilen element isimlerini kontrol eder. Böylece yanlızca istediğiniz elementleri kontrol edersiniz. Son olarak bir fonksiyonun adı alınır. AbstractFormValidator elementleri nasıl kontrol ettiğinizi bilmez. Her element için verilen fonksiyonu çağırır. O fonksiyondan hata mesajı gelirse mesajı saklar. Eğer gelen true ise diğer elemente geçer. Bu nesnenin abstract(soyut) olmasının sebebi budur. Kontrol için sizin fonksiyonunuzu kullanır. AbstractFormValidator kodu aşağıda görülmektedir.

function AbstractFormValidator(aForm,controlElements,functionName){
  this.theForm=aForm;
  this.controlElements=controlElements;
  this.functionName=functionName;
  this.validate=validate;
}
function validate(){
  message="";
  valid=true;
  formManager=new FormManager(this.theForm);
  if(this.controlElements=="ALL"){
    this.controlElements=formManager.getElementNames();
  }
  for(var i=0;i<this.controlElements.length;i++){
    if(formManager.hasElement(this.controlElements[i])){
      theElements=formManager.getElements(this.controlElements[i]);
      theFunctionName=this.functionName;
      result=eval(theFunctionName+"(theElements)");
      if(result!=true){
        message=message+result+"\n";
        valid=false;
      }
    }else{
      message=getNotFoundElementMessages(this.controlElements[i]);
      valid=false;
    }      
  }
  if(!valid){
    alert(message);      
  }
  return valid;  
}

Burada FormManager nesnesi kullanılmaktadır. Bu nesne bir form alır ve formla ilgi çok sayıda işlem yapabilir. Bu projeyle doğrudan bir ilişkisi yoktur. Bu nesne her zaman kullanılabilir. FormManager nesnesinin kodunu sayfanın en aşağısında bulabilirsiniz. Burada FormManager'ın hasElement,getElements,getElementNames metodları kullanılmaktadır. hasElement verilen isimde elementin olup olmadığını gönderir. getElements verilen isimdeki elementlerin dizisini gönderir (aynı isimde birden fazla element olabilir ve bu normaldir). getElementNames ise bir formdaki kullanılan tüm element isimlerini gönderir. Eğer tüm elementleri kontrol etmek istiyorsanız control dizisi yerine "ALL" girmelisiniz. getNotFoundElementMessages metodu ise Form.js dosyasındadır. Bu fonksiyon bir element bulunamayınca gösterilecek mesajı verir.

Bir form validator yapmak için AbstractFormValidator'e bir fonksiyon vermek gerekir. aşağıdaki Örnekte kendimiz bir fonksiyon yaratıyor ve AbstractFormValidator'a veriyoruz.

  1 <html>
  2 <head>
  3 	<script src="..\..\Form.js" language="javascript"></script>	
  4 	<script src="..\Messages.js" language="javascript"></script>		
  5 	<script src="AbstractFormValidator.js"	 language="javascript"></script>		
  6 	<script src="SimpleValidator.js" language="javascript"></script>			
  7 	<script>
  8 	function checkForm(aForm){
  9 		elementArray=new Array("passwordName","composerName");
 10 		validator=new AbstractFormValidator(aForm,elementArray,"simpleValidElement");
 11 		if(validator.validate()){
 12 			alert("form has been sended");
 13 			return false;
 14 		}else{
 15 			return false;
 16 		}
 17 	}
 18 	</script>
 19 </head>
 20 <body>
 21 	<p>Bu sayfa SimpleValidator.js ve AbstractFormValidator.js dosyalarının tesi içindir. aşağıda ki form'da password ve besteci seçenek kutusu kontrol edilecek diğerleri edilmeyecektir.</p>
 22 	<form action="mailto:tekzaf@yahoo.com" onSubmit="return checkForm(this)">
 23 		<table>
 24 			<tr><td>Password:(Control Edilecek)<td><input type="password" name="passwordName" size="12">
 25 			<tr><td>Tel:(Control edilmeyecek)<td><input type="text" name="tel" size="12">
 26 		</table>
 27 		bestecilerden birini seçmelisiniz:<br>
 28 		<input type="radio" name="composerName" value="ertas">Neset Ertas<br>
 29 		<input type="radio" name="composerName" value="muren">Zeki Muren<br>
 30 		<input type="radio" name="composerNamer" value="tayfur">Ferdi Tayfur<br><br>
 31 		şarkılardan seçmesenizde olur.<br>
 32 		<input type="checkbox" name="song" value="kendim">Kendim ettim kendim buldum<br>
 33 		<input type="checkbox" name="song" value="batsin">Batsin bu dunya<br>
 34 		<input type="checkbox" name="song" value="birdemet">Bir demet yasemen<br><br>
 35 		<input type="submit" value=" OK ">		
 36 	</form>
 37 </body>
 38 </html>

Örnekte form submit edildiğinde checkForm fonksiyonu çağrılmıştır. Orada control edilmek istenen elementlerin isimlerinin dizisi yaratılmıştır. Sonra AbstractFormValidator nesnesi yaratılmıştır. simpleValid AbstractFormValidator'ün her isme karşılık çağıracağı fonksiyondur. Bu fonksiyon SimpleValidator.js dosyasındadır (Kod aşağıda görülüyor). Bu yüzden bu dosya link edilmiştir. Ve daha sonra validatorun validate methodu çağrılıyor ve ondan gelen sonuca göre submit işlemi gerçekleşiyor (veya gerçekleşmiyor). AbstractFormValidator Form.js dosyasındaki kodları kullandığı için Form.js dosyası AbstractFormValidator.js dosyasından önce eklenmelidir. Çünkü AbstractFormValidator.js dosyası onları kullanmaktadır.

AbstractFormValidator sadece istediğiniz element isimleri için sizin fonksiyonunuzu çağırmaktadır. Sadece fonksiyonu değiştirerek çok değişik validatorler yapabilirsiniz. Her yeni validator yaptığınızda form elemanlarını alma, döngü açma, aynı isimdeki elementleri bulmak gibi yüklerle uğraşmazsınınız.

//import Form.js,Messages.js
function simpleValidElement(checkedElements){
  if(isTextElementOf(checkedElements[0])){
    if(hasElementValue(checkedElements[0])){
      return true;
    }else{
      return getEmptyElementMessages(checkedElements[0].name);
    }
  }else if(checkedElements[0].type=="radio"||checkedElements[0].type=="checkbox"){
    theChecked=isChecked(checkedElements);
    if(theChecked){
      return theChecked;
    }else if(theChecked==false){
      return getNotCheckedElementMessages(theElements[0].name);
    }
  }else{
    return true;
  }
}

Kodtaki isTextElementOf,hasElementValue,isChecked fonksiyonları Form.js dosyasında bulunmaktadır. getEmptyElementMessages, getNotCheckedElementMessages fonksiyonlarıda Messages.js dosyasındadır. Message.js ile bir element için istediğiniz hata mesajını verebilirsiniz. Messages.js dosyasının kodu aşağıdadır. Bu dosya istenildiği gibi değiştirileblir veya yeni Messages.js yaratılabilir. Tek yapılması gereken bu dosyayı sayfaya link yapmaktır.

function getEmptyElementMessages(elementName){
  return getLabel(elementName)+" is empty";
}
function getNotCheckedElementMessages(elementName){
  return getLabel(elementName)+" don't be checked";
}
function getLabel(key){
  return key;
}

TypeValidatorModel

Yaptığımız örneklerde her element için tek bir fonksiyon çağırılmaktadır. Ve o fonksiyonu yapan kişi elementin adını ve tipini öğrenir ve ona göre kontrol yaptıktan sonra sonucu geri gönderir. SimpleValidator.js'de simpleValidElement fonksiyonu bir elementi alıyor ve onu tipine göre kontrol ediyor. Eğer text elementse ayrı, seçenek kutusu ve onay kutusu için ayrı kontrol yapmaktadır. Biz bunun yerine her tip için bir fonkisyon çağırsak işi daha basitleştirmiş oluruz. Böylece validatoru yazan kişi sadece her tip için nasıl kontrol edileceğini verir. Böylece gelen elementin tipini anlamak işleminden kurtulunur. Aşağıda TypeValidatorModel.js dosyası görülmektedir. Bunu kullanmak için AbstractFormValidator'a typeValidElement fonksiyonunu vermelisiniz. Böylece AbstractFormValidator bu fonksiyonu çağırır. Bu fonksiyonda elementin tipini bulur ve o tipe uygun fonksiyonu çağırır. Bu fonksiyonu doldurmak sizin görevinizdir.

function typeValidElement(checkedElements){
  elementType=checkedElements[0].type;
  if(elementType=="text"){
    return isValidTextElements(checkedElements);
  }else if(elementType=="password"){
    return isValidPasswordElements(checkedElements);
  }else if(elementType=="textarea"){
    return isValidTextareaElements(checkedElements);
  }else if(elementType=="file"){
    return isValidFileElements(checkedElements);
  }else if(elementType=="radio"){
    return isValidRadioElements(checkedElements);
  }else if(elementType=="checkbox"){
    return isValidCheckElements(checkedElements);
  }else if(elementType=="select"){
    return isValidSelectElements(checkedElements);
  }else if(elementType=="button"){
    return isValidButtonElements(checkedElements);
  }else if(elementType=="submit"){
    return isValidSubmitElements(checkedElements);
  }
}

Şimdi TypeValidatorModel'i kullanarak daha önceki örnekteki SimpleValidator'deki yaptıklarımızı yapalım. aşağıda SimpleTypeValidator.js dosyası görülmektedir.

//import Form.js,Messages.js
function isValidTextElements(elements){
  return isValidText(elements);
}
function isValidPasswordElements(elements){
  return isValidText(elements);
}
function isValidTextareaElements(elements){
  return isValidText(elements);  
}
function isValidFileElements(elements){
  return isValidText(elements);
}
function isValidRadioElements(elements){
  return isValidCheckedElement(elements);
}
function isValidCheckElements(elements){
  return isValidCheckedElement(elements);
}
function isValidSelectElements(elements){
  return true;
}
function isValidButtonElements(elements){
  return true;
}
function isValidSubmitElements(elements){
  return true;
}
function isValidText(elements){
  if(hasElementValue(elements[0])){
    return true;
  }else{
    return getEmptyElementMessages(theElements[0].name);
  }
}
function isValidCheckedElement(elements){
  theChecked=isChecked(elements);
  if(theChecked){
    return theChecked;
  }else if(theChecked==false){
    return getNotCheckedElementMessages(theElements[0].name);
  }
}

SimpleTypeValidator'de görüldüğü gibi TypeValidatorModel'de istenilen fonksiyonlar doldurulmuştur. Text alanları (text, password, textarea), seçenek ve onay kutuları kontrol edilmiş, diğerlerinde true gönderilmiştir (kontrol edilmemiştir). isValidText,isValidCheckedElement element yardımcı fonksiyonlardır.

NameValidator

Biz formumuzu elementlerin adlarına göre kontrol etmek isteyelim. yukarıdaki örnek elementin tipine göre senin bir fonksiyonunu çağırmaktadır. Elementin adına göre fonksiyon çağırması için ne yapmamız gerekir. Bir NameValidatorModel yapılmalıdır. Gelen elementin adı bulunur ve valid+(elementinAdı) adında bir fonksiyon çağırılır. Örneğin day adında bir elemente rastlandığında validday() fonksiyonu çağırılacaktır. Aşağıda NameValidatorModel.js görülmektedir.

function nameValidElement(checkedElements){
  elementName=checkedElements[0].name;
  return eval("valid"+elementName+"(checkedElements)");
}

Görüldüğü gelen elementin adı öğreniliyor ve validElementAdı fonksiyonu çağırılıyor. Şimdi uygulamasını yapalım

  1 <html>
  2 <head>
  3 	<script src="..\..\Form.js" language="javascript"></script>	
  4 	<script src="NameValidatorModel.js" language="javascript"></script>			
  5 	<script src="AbstractFormValidator.js"	 language="javascript"></script>		
  6 	<script>
  7 	function checkForm(aForm){
  8 		elementArray=new Array("passwordName");
  9 		validator=new AbstractFormValidator(aForm,elementArray,"nameValidElement");
 10 		if(validator.validate()){
 11 			alert("form bilgileri gönderildi");
 12 			return false;
 13 		}else{
 14 			return false;
 15 		}
 16 	}
 17 	function validpasswordName(elements){
 18 		if(elements[0].value!=""){
 19 			if(elements[0].value.length<5){
 20 				return "lütfen 5 karakterden büyük şifre giriniz";
 21 			}else{
 22 				return true;
 23 			}	
 24 		}else{
 25 			return "lütfen şifrenizi giriniz";
 26 		}
 27 	} 
 28 	</script>
 29 </head>
 30 <body>
 31 	<p> Bu sayfa NameValidator.js ve AbstractFormValidator.js dosyalarının testi içindir. aşağıdaki form'da şifrenin(password) doğru girilip girilmediği kontrol edilecektir.
 32 	<form action="mailto:tekzaf@yahoo.com" onSubmit="return checkForm(this)">
 33 		<table>
 34 			<tr><td>Password:(Control Edilecek)<td><input type="password" name="passwordName" size="12">
 35 			<tr><td>Tel:(Control edilmeyecek)<td><input type="text" name="tel" size="12">
 36 		</table>
 37 		bestecilerden birini seçmelisiniz:<br>
 38 		<input type="radio" name="composerName" value="ertas">Neset Ertas<br>
 39 		<input type="radio" name="composerName" value="muren">Zeki Muren<br>
 40 		<input type="radio" name="composerNamer" value="tayfur">Ferdi Tayfur<br><br>
 41 		şarkılardan seçmesenizde olur.<br>
 42 		<input type="checkbox" name="song" value="kendim">Kendim ettim kendim buldum<br>
 43 		<input type="checkbox" name="song" value="batsin">Batsin bu dunya<br>
 44 		<input type="checkbox" name="song" value="birdemet">Bir demet yasemen<br><br>
 45 		<input type="submit" value=" OK ">		
 46 	</form>
 47 </body>
 48 </html>

Burada sadece password alanı kontrol edilmektedir. NameValidatorModel kullanıldığı için validpasswordName methodu çağırılacaktır.

Form.js dosyasının içeriği

function FormManager(aForm){
  this.theForm=aForm;
  this.getForm=getForm;  
  this.getName=getName;  
  this.getAction=getAction;  
  this.getMethod=getMethod;  
  this.getTarget=getTarget;  
  this.submitForm=submitForm;
  
  this.setAction=setAction;  
  this.submitTo=submitTo;
    
  this.getAllElements=getAllElements;
  this.getElements=getElements;
  this.getElementNames=getElementNames;
  this.getElementsOfType=getElementsOfType;
  this.getElementType=getElementType;
  this.getElementValue=getElementValue;
  
  this.getTextElements=getTextElements;
  this.getTextAreaElements=getTextAreaElements;  
  this.getTextFieldElements=getTextFieldElements;    
  this.getPasswordElements=getPasswordElements;
  this.getFileElements=getFileElements;              
  this.getCheckBoxElements=getCheckBoxElements;
  this.getRadioBoxElements=getRadioBoxElements;
  this.getSelectElements=getSelectElements;
  this.getButtonElements=getButtonElements;
  this.getSubmitElements=getSubmitElements;              

  this.getElementsNumber=getElementsNumber;
  this.getElementsNumberOfType=getElementsNumberOfType
  this.getTextElementsNumber=getTextElementsNumber  
  
  this.hasElement=hasElement;
  this.hasElementValue=hasElementValue;
  this.isTypeOf=isTypeOf;
  this.isTextElement=isTextElement;
  this.isTextArea=isTextArea;
  this.isTextField=isTextField;
  this.isPassword=isPassword;
  this.isFile=isFile;
  this.isCheckBox=isCheckBox;
  this.isRadioBox=isRadioBox;
  this.isButton=isButton;
  this.isSubmit=isSubmit;

  this.display=display;
}
function getForm(){
  return this.theForm;
}
function getName(){
  return this.getForm().name;
}
function getAction(){
  return this.getForm().action;
}
function getMethod(){
  return this.getForm().method;
}
function getTarget(){
  return this.getForm().target;
}
function setAction(actionUrl){
  this.getForm().action=actionUrl;
}
function submitForm(){
  this.getForm().submit();
}
function submitTo(actionUrl){
  this.setAction(actionUrl);
  this.submitForm();
}
function getAllElements(){
  return this.getForm().elements;
}
function getElements(elementName){
  elementsArray=new Array(0);
  allElements=this.getAllElements();
  for(i=0;i<allElements.length;i++){
    if(allElements[i].name==elementName){
      elementsArray[elementsArray.length]=allElements[i];
    }
  }
  if(elementsArray.length==0){
    return null;
  }
  return elementsArray;
}
function getElementNames(){
  allElements=this.getAllElements();
  names=new Array(0);
  elementName="";
  for(i=0;i<allElements.length;i++){
    newElementName=allElements[i].name;
    if(elementName!=newElementName){
      names[names.length]=newElementName;
      elementName=newElementName;
    }
  }
  return names;
}
function getElementsOfType(elementType){
  elementsArray=new Array(0);
  allElements=this.getAllElements();
  for(i=0;i<allElements.length;i++){
    if(allElements[i].type==elementType){
      elementsArray[elementsArray.length]=allElements[i];
    }
  }
  if(elementsArray.length==0){
    return null;
  }
  return elementsArray;
}
function getElementType(elementName){
  theElements=this.getElements(elementName);
  return theElements[0].type;   
}
function getElementValue(elementName){
  return this.getElements(elementName)[0].value;
}
function getTextElements(){
  elementsArray=new Array(0);
  allElements=this.getAllElements();
  for(i=0;i<allElements.length;i++){
    if(isTextElementOf(allElements[i])){
      elementsArray[elementsArray.length]=allElements[i];
    }
  }
  if(elementsArray.length==0){
    return null;
  }
  return elementsArray;
}
function getTextAreaElements(){
  return this.getElementsOfType("textarea");
}
function getTextFieldElements(){
  return this.getElementsOfType("text");
}    
function getPasswordElements(){
  return this.getElementsOfType("password");
}
function getFileElements(){
  return this.getElementsOfType("file");
}              
function getCheckBoxElements(){
  return this.getElementsOfType("checkbox");
}
function getRadioBoxElements(){
  return this.getElementsOfType("radiobox");
}
function getSelectElements(){
  return this.getElementsOfType("select");
}
function getButtonElements(){
  return this.getElementsOfType("button");
}
function getSubmitElements(){
  return this.getElementsOfType("submit");
}
function getElementsNumber(elementName){
  number=0;
  if(this.hasElement(elementName)){
    allElements=this.getAllElements();
    allLength=allElements.length;
    for(var i=0;i<allLength;i++){
      if(allElements[i].name==elementName){
        number=number+1;
      }
    }
  }
  return number;  
}
function getElementsNumberOfType(elementType){
  number=0;
  if(isTrueType(elementType)==false){
    alert(getInvalidTypeMessages(elementType));
  }
  allElements=this.getAllElements();
  allLength=allElements.length;
  for(var i=0;i<allLength;i++){
    if(allElements[i].type==elementType){
      number=number+1;
    }
  }
  return number;
}
function  getTextElementsNumber(){
  number=0;
  allElements=this.getAllElements();
  allLength=allElements.length;
  for(var i=0;i<allLength;i++){
    if(isTextElementOf(allElements[i])){
      number=number+1;
    }      
  }
  return number;  
}
function hasElement(elementName){
  if(eval("this.getForm()."+elementName)==null){
    return false;
  }else{
    return true;
  }
}
function hasElementValue(elementName){
  elementValue=this.getElementValue(elementName);
  return elementValue!=""&&elementValue!=null;      
}
function isTypeOf(elementName,elementType){
  if(this.hasElement(elementName)){
    theElements=this.getElements(elementName);
    return theElements[0].type==elementType;
  }else{
    alert(getNotFoundElementMessages(elementName));
  }
}
function isTextElement(elementName){
  return isTextArea(elementName)||isTextField(elementName)||isPassword(elementName)||isFile(elementName);
}
function isTextArea(elementName){
  return isTypeOf(elementName,"textarea");
}
function isTextField(elementName){
  return isTypeOf(elementName,"text");
}
function isPassword(elementName){
  return isTypeOf(elementName,"password");
}
function isFile(elementName){
  return isTypeOf(elementName,"file");
}
function isCheckBox(elementName){
  return isTypeOf(elementName,"checkbox");
}
function isRadioBox(elementName){
  return isTypeOf(elementName,"radiobox");
}
function isButton(elementName){
  return isTypeOf(elementName,"button");
}
function isSubmit(elementName){
  return isTypeOf(elementName,"submit");
}
function display(){
  alert(this.getName());
}

//ElementManager 

function isTrueType(elementType){
  return true;
}
function getTypeOfElement(element){
  return element.type;
}
function isTextElementOf(aElement){
  elementType=aElement.type;
  if(elementType=="text"||elementType=="textarea"||elementType=="password"||elementType=="file"){
    return true;
  }else{
    return false;
  }
}
function hasElementValue(element){
  elementValue=element.value;
  if(elementValue==""||elementValue==null){
    return false;  
  }else{
    return true;
  }      
}
function isChecked(elements){
  theChecked=false;
  for(var j=0;j<elements.length;j++){
    if(elements[j].checked){
      theChecked=true;
      break;
    }
  }
  return theChecked;
}
function getCheckedRadioValue(elements){
  var theCheckedValue;
  for(var j=0;j<elements.length;j++){
    if(elements[j].checked){
      theCheckedValue=elements[j].value;
      break;
    }
  }
  return theCheckedValue;
}
// tool functions 

function submitFormData(aForm,actionUrl){
  manager=new FormManager(aForm);
  manager.submitTo(actionUrl);
}

//messages

function getNotFoundElementMessages(elementName){
  return elementName+" form element not found ";
}
function getInvalidTypeMessages(formType){
  return "Invalid Form Element Type : "+formType;
}

Form Validator

Form Nedir?

form validator sistemi

TypeValidatorModel

NameValidator

Form.js dosyasının içeriği

Dosya Listesi