can't validate columns created using createElement

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

can't validate columns created using createElement

 
0
  #1
Jul 22nd, 2009
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 )

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. var dtCh= "/";
  3. var minYear=1900;
  4. var maxYear=2100;
  5.  
  6. function isInteger(s){
  7. var i;
  8. for (i = 0; i < s.length; i++){
  9. // Check that current character is number.
  10. var c = s.charAt(i);
  11. if (((c < "0") || (c > "9"))) return false;
  12. }
  13. // All characters are numbers.
  14. return true;
  15. }
  16.  
  17. function stripCharsInBag(s, bag){
  18. var i;
  19. var returnString = "";
  20. // Search through string's characters one by one.
  21. // If character is not in bag, append to returnString.
  22. for (i = 0; i < s.length; i++){
  23. var c = s.charAt(i);
  24. if (bag.indexOf(c) == -1) returnString += c;
  25. }
  26. return returnString;
  27. }
  28.  
  29. function daysInFebruary (year){
  30. // February has 29 days in any year evenly divisible by four,
  31. // EXCEPT for centurial years which are not also divisible by 400.
  32. return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
  33. }
  34. function DaysArray(n) {
  35. for (var i = 1; i <= n; i++) {
  36. this[i] = 31
  37. if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
  38. if (i==2) {this[i] = 29}
  39. }
  40. return this
  41. }
  42.  
  43. function isDate(dtStr){
  44. var daysInMonth = DaysArray(12)
  45. var pos1=dtStr.indexOf(dtCh)
  46. var pos2=dtStr.indexOf(dtCh,pos1+1)
  47. var strMonth=dtStr.substring(0,pos1)
  48. var strDay=dtStr.substring(pos1+1,pos2)
  49. var strYear=dtStr.substring(pos2+1)
  50. strYr=strYear
  51. if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
  52. if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
  53. for (var i = 1; i <= 3; i++) {
  54. if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
  55. }
  56. month=parseInt(strMonth)
  57. day=parseInt(strDay)
  58. year=parseInt(strYr)
  59. if (pos1==-1 || pos2==-1){
  60. document.getElementById("DOJ_error").innerHTML = "please enter a date in - mm/dd/yyyy format"
  61. return false
  62. }
  63. if (strMonth.length<1 || month<1 || month>12){
  64. document.getElementById("DOJ_error").innerHTML = "Please enter a valid month"
  65.  
  66. return false
  67. }
  68. if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
  69. document.getElementById("DOJ_error").innerHTML = "Please enter a valid day"
  70. return false
  71. }
  72. if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
  73. document.getElementById("DOJ_error").innerHTML = "Please enter a valid 4 digit year"
  74.  
  75. return false
  76. }
  77. if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
  78. document.getElementById("DOJ_error").innerHTML = "Please enter a valid date"
  79.  
  80. return false
  81. }
  82. return true
  83. }
  84. function ValidateForm()
  85. {
  86. alert("hi from ValidateForm")
  87. //var dt=document.transaction.application_doj' + iteration
  88. //alert(dt)
  89. iteration=document.getElementById("no_of_applications").value
  90. alert(iteration)
  91. var dt=document.getElementById("application_doj" + iteration).value
  92. // var dt=document.getElementById("application_doj2").value
  93.  
  94. alert(dt)
  95. if (isDate(dt.value)==false){
  96. //dt.focus()
  97. return false
  98. }
  99. else
  100. {
  101. document.getElementById("DOJ_error").innerHTML=""
  102. return true
  103. }
  104. }

tihs is the DOJ_error

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <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...
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: can't validate columns created using createElement

 
1
  #2
Jul 22nd, 2009
You assigned:
var dt=document.getElementById("application_doj" + iteration).value

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


  1. function ValidateForm()
  2. {
  3. alert("hi from ValidateForm")
  4. //var dt=document.transaction.application_doj' + iteration
  5. //alert(dt)
  6. iteration=document.getElementById("no_of_applications").value
  7. alert(iteration)
  8. var dt=document.getElementById("application_doj" + iteration).value
  9. // var dt=document.getElementById("application_doj2").value
  10.  
  11. alert(dt)
  12. if (isDate(dt.value)==false){ // dt.value is undefined, pass only dt
  13. //dt.focus()
  14. return false
  15. }
  16. else
  17. {
  18. document.getElementById("DOJ_error").innerHTML=""
  19. return true
  20. }
  21. }
Last edited by Luckychap; Jul 22nd, 2009 at 2:50 pm.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: can't validate columns created using createElement

 
0
  #3
Jul 22nd, 2009
thanks.............
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: can't validate columns created using createElement

 
0
  #4
Jul 22nd, 2009
@lucky chap

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <span id="DOJ_error"></span>

like


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <span id="DOJ_error1"></span>
for application_doj1

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <span id="DOJ_error2"></span>
for appliation_doj2

so that i can display it under every column ?
Last edited by aashishn86; Jul 22nd, 2009 at 4:16 pm.
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: can't validate columns created using createElement

 
0
  #5
Jul 23rd, 2009
Yes indeed you can.

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

  1. function addRow()
  2. {
  3. // Some of your code
  4.  
  5. gl.type = 'text';
  6. gl.name = 'application_doj' + iteration;
  7. gl.id = 'application_doj' + iteration;
  8. gl.size = 45;
  9. gl.className='cellData';
  10. gl.style.width='220px'
  11. gl.style.height='17px'
  12. gl.value='mm/dd/yyyy'
  13. // Removed your handlers from here and putted it below
  14. cellLeft.appendChild(gl);
  15. document.getElementById("no_of_applications").value=iteration
  16.  
  17. //Adding span for showing validation error
  18. var erSpan = document.createElement('span');
  19. // Add error span to this cell.
  20. cellLeft.appendChild(erSpan);
  21.  
  22. // Here goes ur handler
  23. gl.onfocus= function() {gl.value=""};
  24. gl.onblur= function() {ValidateForm(erSpan)}; // Passing erSpan, so that we can easily show error message
  25. }

Your Validation should be like this:

  1. function ValidateForm(erSpan) // here we are getting our corresponding error span :)
  2. {
  3. iteration=document.getElementById("no_of_applications").value
  4. var dt=document.getElementById("application_doj" + iteration).value
  5.  
  6. if (isDate(dt)==false){
  7. // Put error message here ...
  8. erSpan.innerHTML="Please try again"
  9. return false
  10. }
  11. else
  12. {
  13. // Put error message here ...
  14. erSpan.innerHTML="Good work"
  15. return true
  16. }
  17. }

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.
Last edited by Luckychap; Jul 23rd, 2009 at 2:28 am.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: can't validate columns created using createElement

 
0
  #6
Jul 23rd, 2009
thanks this works....
what if i want to but it below the column not to its left..... ??
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: can't validate columns created using createElement

 
0
  #7
Jul 23rd, 2009
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...
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: can't validate columns created using createElement

 
0
  #8
Jul 23rd, 2009
i tried using this like :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. el.onblur= function() {error_appname(this,erSpan1);}

and

the function :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. function error_appname(obj,erSpan1)
  3. {
  4. var appname = document.getElementById(obj).value
  5.  
  6. if (appname == "" )
  7. {
  8. erSpan1.innerHTML = "<br>please enter a application name"
  9. }
  10. else
  11. {
  12. erSpan1.innerHTML ="<br><font color='white'>validated</font>"
  13. }
  14. }

this doesn't work out....
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

Re: can't validate columns created using createElement

 
0
  #9
Jul 23rd, 2009
Simple, pass the date element gl also in validation function

  1. // Passing erSpan, so that we can easily show error message
  2. gl.onblur= function() {error_appname(gl, erSpan)};
  3.  
  4.  
  5. function error_appname(obj,erSpan1)
  6. {
  7.  
  8. //var appname = document.getElementById(obj).value // undefined
  9. var appname = obj.value; // Here we are getting element itself, so why you used getElementById(obj)
  10.  
  11. if (appname == "" )
  12. {
  13. erSpan1.innerHTML = "<br>please enter a application name"
  14. }
  15. else
  16. {
  17. erSpan1.innerHTML ="<br><font color='white'>validated</font>"
  18. }
  19. }

Come on!!
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 185
Reputation: aashishn86 is an unknown quantity at this point 
Solved Threads: 9
aashishn86's Avatar
aashishn86 aashishn86 is offline Offline
Junior Poster

Re: can't validate columns created using createElement

 
0
  #10
Jul 23rd, 2009
dat works

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

basics sahi nahin hai nah itne...........
tried everything else
like gl.id etc
Last edited by aashishn86; Jul 23rd, 2009 at 3:38 pm.
rEaLITy iS aN iLLUSIOn cAUSED bY lACk oF aLCOHOL....
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC