943,907 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Jul 22nd, 2009
0

can't validate columns created using createElement

Expand Post »
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...
Similar Threads
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 22nd, 2009
1

Re: can't validate columns created using createElement

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

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


javascript Syntax (Toggle Plain Text)
  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.
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Jul 22nd, 2009
0

Re: can't validate columns created using createElement

thanks.............
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 22nd, 2009
0

Re: can't validate columns created using createElement

@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.
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 23rd, 2009
0

Re: can't validate columns created using createElement

Yes indeed you can.

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

javascript Syntax (Toggle Plain Text)
  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:

javascript Syntax (Toggle Plain Text)
  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.
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Jul 23rd, 2009
0

Re: can't validate columns created using createElement

thanks this works....
what if i want to but it below the column not to its left..... ??
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 23rd, 2009
0

Re: can't validate columns created using createElement

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...
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 23rd, 2009
0

Re: can't validate columns created using createElement

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....
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Jul 23rd, 2009
0

Re: can't validate columns created using createElement

Simple, pass the date element gl also in validation function

javascript Syntax (Toggle Plain Text)
  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!!
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Jul 23rd, 2009
0

Re: can't validate columns created using createElement

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.
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: JavaScript onmouseover image gallery
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to extract HMTL content through the use of XMLHttpRequest object?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC