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...

Recommended Answers

All 18 Replies

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
    }
 }
commented: thanks :) +2

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

@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 ?

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.

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

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...

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.... :(

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!!

dat works :) :) :)

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

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

No problem bros....

Everybody starts with:

'printf(''Hello World");'

BEST OF LUCK!

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 :(

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]);
  }
}
commented: ingenious,simple n elegant... thanks :) +2
commented: Nice example +22

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

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)

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));

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

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:)

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............

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.