can't validate columns created using createElement

[aashishn86]

I use this function to add rows dynamically in a table

function addRow()
{
  var tbl = document.getElementById('applications');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  
  // right cell
  var cellRight = row.insertCell(0);
  var el = document.createElement('input');

  el.type = 'text';
  el.name = 'application_n' + iteration;
  el.id = 'application_n' + iteration;
  el.size = 45;
  el.className='cellData';
  el.style.width='220px'
  el.style.height='17px'
  cellRight.appendChild(el);
 
  alert("the id is " + el.id)
  
  
  
  
  
  var cellMiddle = row.insertCell(1);
  var fl = document.createElement('input');

  fl.type = 'text';
  fl.name = 'application_no' + iteration;
  fl.id = 'application_no' + iteration;
  fl.size = 45;
  fl.className='cellData';
  fl.style.width='220px'
  fl.style.height='17px'
  cellMiddle.appendChild(fl);
  
  
  var cellLeft = row.insertCell(2);
  var gl = document.createElement('input');

  gl.type = 'text';
  gl.name = 'application_doj' + iteration;
  gl.id = 'application_doj' + iteration;
  gl.size = 45;
  gl.className='cellData';
  gl.style.width='220px'
  gl.style.height='17px'
  gl.value='mm/dd/yyyy'
  gl.onfocus= function() {gl.value=""};
  gl.onblur= function() {ValidateForm()};
  cellLeft.appendChild(gl);
  document.getElementById("no_of_applications").value=iteration
   
  }

and using this function to validate date ( the column created as gl in the above function )

var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
	var i;
    for (i = 0; i < s.length; i++){   
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag){
	var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++){   
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function daysInFebruary (year){
	// February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
	for (var i = 1; i <= n; i++) {
		this[i] = 31
		if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
		if (i==2) {this[i] = 29}
   } 
   return this
}

function isDate(dtStr){
	var daysInMonth = DaysArray(12)
	var pos1=dtStr.indexOf(dtCh)
	var pos2=dtStr.indexOf(dtCh,pos1+1)
	var strMonth=dtStr.substring(0,pos1)
	var strDay=dtStr.substring(pos1+1,pos2)
	var strYear=dtStr.substring(pos2+1)
	strYr=strYear
	if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
	if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
	for (var i = 1; i <= 3; i++) {
		if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
	}
	month=parseInt(strMonth)
	day=parseInt(strDay)
	year=parseInt(strYr)
	if (pos1==-1 || pos2==-1){
		document.getElementById("DOJ_error").innerHTML = "please enter a date in - mm/dd/yyyy format"
		return false
	}
	if (strMonth.length<1 || month<1 || month>12){
		document.getElementById("DOJ_error").innerHTML = "Please enter a valid month"
		
		return false
	}
	if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
		document.getElementById("DOJ_error").innerHTML = "Please enter a valid day"
		return false
	}
	if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
		document.getElementById("DOJ_error").innerHTML = "Please enter a valid 4 digit year"

		return false
	}
	if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
		document.getElementById("DOJ_error").innerHTML = "Please enter a valid date"

		return false
	}
return true
}
function ValidateForm()
	{
	alert("hi from ValidateForm")
	//var dt=document.transaction.application_doj' + iteration
	//alert(dt)
	iteration=document.getElementById("no_of_applications").value
	alert(iteration)
  	 var dt=document.getElementById("application_doj" + iteration).value
   	// var dt=document.getElementById("application_doj2").value	
	
	alert(dt)
	if (isDate(dt.value)==false){
		//dt.focus()
		return false
	}
	else
	{
	document.getElementById("DOJ_error").innerHTML=""
    return true
    }
 }

tihs is the DOJ_error

<span id="DOJ_error"></span>

but nothing happens when i run this...
it does gets the value from each date column in the table and also calls the isDate() function
but nothing after that...

[Luckychap]

You assigned:
var dt=document.getElementById("application_doj" + iteration).value

dt has already got value. So pass only dt in isDate(dt).

function ValidateForm()
	{
	alert("hi from ValidateForm")
	//var dt=document.transaction.application_doj' + iteration
	//alert(dt)
	iteration=document.getElementById("no_of_applications").value
	alert(iteration)
  	 var dt=document.getElementById("application_doj" + iteration).value
   	// var dt=document.getElementById("application_doj2").value	
	
	alert(dt)
	if (isDate(dt.value)==false){            // dt.value is undefined, pass only dt
		//dt.focus()
		return false
	}
	else
	{
	document.getElementById("DOJ_error").innerHTML=""
    return true
    }
 }

[aashishn86]

thanks.............
:)

[aashishn86]

@lucky chap

can i somehow add a span with the columns so that instead of displaying the error messages at one place

<span id="DOJ_error"></span>

like

<span id="DOJ_error1"></span>

for application_doj1

<span id="DOJ_error2"></span>

for appliation_doj2

so that i can display it under every column ?

[Luckychap]

Yes indeed you can.

Add a span element in every row in ur addRow() method

function addRow()
{
  // Some of your code 

  gl.type = 'text';
  gl.name = 'application_doj' + iteration;
  gl.id = 'application_doj' + iteration;
  gl.size = 45;
  gl.className='cellData';
  gl.style.width='220px'
  gl.style.height='17px'
  gl.value='mm/dd/yyyy'
  // Removed your handlers from here and putted it below
  cellLeft.appendChild(gl);
  document.getElementById("no_of_applications").value=iteration

 //Adding span for showing validation error
var erSpan = document.createElement('span');
// Add error span to this cell.
cellLeft.appendChild(erSpan);

 // Here goes ur handler
  gl.onfocus= function() {gl.value=""};
  gl.onblur= function() {ValidateForm(erSpan)}; // Passing erSpan, so that we can easily show error message   
  }

Your Validation should be like this:

function ValidateForm(erSpan) // here we are getting our corresponding error span :) 
	{
	iteration=document.getElementById("no_of_applications").value
  	 var dt=document.getElementById("application_doj" + iteration).value

	if (isDate(dt)==false){
               // Put error message here ...
		erSpan.innerHTML="Please try again"
		return false
	}
	else
	{
        // Put error message here ...
	erSpan.innerHTML="Good work"
        return true
    }
 }

hope this will help you. If you need any clarification u r most welcome. have a nice day.

and one more thing, Please try to avoid putting experimental codes (alerts and comments). when u are posting code for help.

[aashishn86]

thanks this works....
what if i want to but it below the column not to its left..... ??

[aashishn86]

i am doing that by using :

erSpan.innerHTML="<br> Good Work"

now the problem i face is..
suppose the first date field gives an error..
now i add another row by calling the addRow() function...
the function now works only for the last field... ( because thats the address being passed by using [iteration variable]

is there any other way to pass the name of the field to the function ??

thanks...
hope i have stated my problem clearly...

[aashishn86]

i tried using this like :

el.onblur= function() {error_appname(this,erSpan1);}

and

the function :

function error_appname(obj,erSpan1)
  {
   var appname = document.getElementById(obj).value

    if (appname == "" )
    {
	  erSpan1.innerHTML = "<br>please enter a application name"
    }
    else 
     {
     erSpan1.innerHTML ="<br><font color='white'>validated</font>"
     }
}

this doesn't work out.... :(

[Luckychap]

Simple, pass the date element gl also in validation function

// Passing erSpan, so that we can easily show error message 
gl.onblur= function() {error_appname(gl, erSpan)}; 


function error_appname(obj,erSpan1)
  {
   
    //var appname = document.getElementById(obj).value  // undefined
     var appname = obj.value; // Here we are getting element itself, so why you used getElementById(obj)
    
    if (appname == "" )
    {
	  erSpan1.innerHTML = "<br>please enter a application name"
    }
    else 
     {
     erSpan1.innerHTML ="<br><font color='white'>validated</font>"
     }
}

Come on!!

[aashishn86]

dat works :) :) :)

thanks bhai...........

basics sahi nahin hai nah itne...........
tried everything else
like gl.id etc :)

[Luckychap]

No problem bros....

Everybody starts with:

'printf(''Hello World");'

BEST OF LUCK!

[aashishn86]

another problem :)

well i am calling these functions on the "onblur event"

now i also want that when the user clicks on submit..
all the functions are called....

so i was writing something like:

iteration = document.getElementById("no_of_applications").value
for ( i=1;i<iteration;i++)
 {
  error_appname('application_name'+i,erSpan1)

 }

doesn't work :(

[Luckychap]

This can be done in many ways, but I will tell you easiest way:

Your function error_appname(inputField, erSpan), requires 2 argument, so maintain global arrays for those.

// Global arrays used to hold input fileds and error spans
var inputFieldArray = [];
var erSpanArray     = [];


function addRow()
{
  // Some of your code 

  gl.type = 'text';
  gl.name = 'application_doj' + iteration;
  gl.id = 'application_doj' + iteration;
  gl.size = 45;
  gl.className='cellData';
  gl.style.width='220px'
  gl.style.height='17px'
  gl.value='mm/dd/yyyy'
  // Removed your handlers from here and putted it below
  cellLeft.appendChild(gl);
  document.getElementById("no_of_applications").value=iteration

  //Adding span for showing validation error
  var erSpan = document.createElement('span');
  // Add error span to this cell.
  cellLeft.appendChild(erSpan);

  // Here goes ur handler
  gl.onfocus= function() {gl.value=""};
  gl.onblur= function() {ValidateForm(erSpan)}; // Passing erSpan, so that we can easily show error message 

  // Push elements in global arrays  
  inputFieldArray.push(gl);
  erSpanArray.push(erSpan);

}

Now the function to validate all fields will be:

function validateAll() {
  var totalRows = inputFieldArray.length; // OR erSpanArray.length
  for(var i = 0; i < totalRows; i++) {
    error_appname(inputFieldArray[i], erSpanArray[i]);
  }
}

[aashishn86]

great :)
simple n elegant...
thanks.......
:)

[aashishn86]

well if i had a different espan id for every erspan
then y couldn't i call it like :

error_appname('application_name'+i,'erSpan' + i)

[Luckychap]

This may work for you:

var dgebi = document.getElementById;
// This function takes elements not elements id.
error_appname(dgebi ('application_name'+i), dgebi ('erSpan' + i));

[aashishn86]

i'll try both and let u know...
:)
thanks..

[aashishn86]

great both of them work great :)

there's one more thing left, with which i'll need your help............
i'll post that soon...
thanks:)

[aashishn86]

hii
had to call some functions using arrays and some by element id
had to decide the loop dynamically........
solved it :)
thanks for the help............