my problem is i m having a row by default.And validation works fine for this,
But if i add an extra row to it.....even if i enter the values for the new added row i get error that -----i hav not entered the values.
PLease find the solution...Below is the code i hav used.......
[HTML]<%@ page session="true"%>
<html>
<head><title=title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<LINK href="/STYLES/HD_Style.css" type=text/css rel=stylesheet>
<link rel="stylesheet" type="text/css" media="all" href="script/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<link rel="stylesheet" type="text/css" media="all" href="script/common-style.css" title="style1" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<script language="JavaScript" src="script/tigra_tables.js"></script>
<script type="text/javascript" src="script/calendar.js"></script>
<script type="text/javascript" src="script/calendar-setup.js"></script>
<script type="text/javascript" src="script/calendar-en.js"></script>
<script language="JavaScript" src="script/validator.js"></script>
<script language="JavaScript" src="script/validations.js"></script>
<style type=text/css>
.blog
{
visibility: visible;
display: block;
background-color:#CCC;
}
.halfmoon{
margin-bottom: 4px;
}
.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: left;
border-bottom: 1px solid #929492;
}
.halfmoon li{
display: inline;
margin: 0;
}
.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 0; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font: bold 14px Verdana;
background: orange url(tabright.gif) top right no-repeat;
}
.halfmoon li a:visited{
color: Red;
}
.halfmoon li a:hover, .halfmoon li a.current{
background-color: orange;
color: blue;
}
#tabcontentcontainer{
width:95%; /*width of 2nd level content*/
height:1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}
.tabcontent{
display:none;
}
</style>[/html]
Expand|Select|Wrap|Line Numbers
- <Script language="JavaScript">
- row=1;
- function Add() {
- str = document.getElementById("Table1").innerHTML;
- oldTableData = str.substring(0, str.length-1);
- newTableData = oldTableData +"<tr align='center'>"
- //+"<td><input type=text id=lineseqs name=lineseqs size=3 value="+(row+1)+" ></td>"
- +"<td bgcolor='orange' width='113'><center><input type=text name='N1' size=15></center></td>"
- +"<td bgcolor='orange' width='113' ><center><input type=text name='N2' size=15></center></td>"
- +"<td bgcolor='orange' width='113'><center><input type=text name='N3' size=15></center></td>"
- +"<td bgcolor='orange' width='113'><center><input type=text name='N4' size=15></center></td>"
- +"</tr>"+
- "</table>";
- document.getElementById("Table1").innerHTML = newTableData;
- row=row+1;
- out.print(str.length);
- nullValidation();
- delrow_stat();
- }
- function delrow()
- {
- if(confirm("Are you sure you want to Delete")==true)
- {
- document.getElementById('mytable').deleteRow()
- row=row-1;
- delrow_stat();
- }
- }
- function delrow_stat()
- {
- document.getElementById('rows').value=row;
- }
- function noEdit(){
- obj1=document.getElementById('emp_id');
- obj2=document.getElementById('fstName');
- obj1.contentEditable = false;
- obj2.contentEditable = false;
- delrow_stat();
- }
- function fnPaste() {
- event.returnValue = false;
- }
- function fnCopy() {
- event.returnValue = false;
- }
- function fnSelect() {
- event.returnValue = false;
- }
- function goBack()
- {
- history.back();
- }
- </script>
- <script type="text/javascript">
- //function displayrow() {
- //alert("hai");
- // //if (!document.getElementsByTagName || !document.createTextNode) return;
- //
- //// var rows = document.getElementById('Table1').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
- ////document.getElementById('Table1').
- //
- // var rows = getElementById('mytable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
- // for (i = 0; i < rows.length; i++) {
- //
- // rows[i].onclick = function() {
- //
- // alert(this.rowIndex + 1);
- //
- // }
- //
- // }
- //
- //}
- //
- //</script>
- </Script>
<body bgcolor="lightyellow" onLoad="displayrow();">
<p>
<div id="ddimagetabs" style3="margin-bottom: 4px; font-size: 12px;">
<a href="genForm.jsp" color="red">GENERAL</a>
<a href="eduForm.jsp">EDUCATION</a>
<a href="dependForm.jsp">DEPENDENT</a>
<a href="benefitForm.jsp">BENEFITS</a>
<a href="skillForm.jsp">SKILLS</a>
<a href="addEmpID.jsp">ADD/UPDATE</a>
</div>
<form method="POST" name="jobform" action="jobForm.do" onSubmit="return v.exec();">
<br><br>
<font color="blue"><b></b></font>
<table bgcolor=lightyellow cellpadding=2 cellspacing=2 align="left" >
<tr align="center"><td align="center" bgcolor="orange" width=113 >Emp Id</td>
<td bgcolor="orange">
<input type="text" id="emp_id" size="15" name="emp_id" class ="blog"
value=<%=session.getAttribute("sessEmpid")%> onPaste="fnPaste();" onCopy="fnCopy();" onSelect="fnSelect();" ></td>
</tr><tr>
<td align="center" bgcolor="orange" width=113>Employee Name</td>
<td bgcolor="orange">
<input type="text" id="fstName" size=15 class ="blog" name="fstName"
onPaste="fnPaste();" onCopy="fnCopy();" onSelect="fnSelect();" value=<%=session.getAttribute("sessfstName")%>> </td>
</tr>
</table>
<br><br><br><br>
<br clear="left">
<fieldset><legend> <b>Job Info</b> </legend>
<table border="0" width="107%" height="115">
<tr>
<td width="18%" height="1"></td>
<td width="4%" height="1"><br></td>
<td width="17%" height="1"></td>
<td width="27%" height="1"></td>
</tr>
<tr>
<td width="18%" height="33"></td>
<td width="9%" height="33" ><div align="center">Job Type</div></td>
<td width="32%" height="33"><font face="System"> <input
type="radio" value="V3" checked name="R1"> Fulltime<input
type="radio" name="R1" value="V4">Contractor</font></td>
<td width="4%" height="33"></td>
<td width="15%" height="33"></td>
<td width="27%" height="33"></td>
</tr>
<tr>
<td width="18%" height="34"></td>
<td width="9%" height="34" ><div align="center">Date Of Join</div></td>
<td width="32%" height="34"><input type="text" size="16" id="f_date_a" name="T2"></td>
<td width="4%" height="34"> </td>
<td width="15%" height="34"></td>
<td width="27%" height="34"> </td>
</tr>
<tr>
<td width="18%" height="25"></td>
<td width="9%" height="21" ><div align="center">Job Grade</div></td>
<td width="32%" height="25"><select size="1" name="D1">
<option selected=selected>-Select-</option>
<option value=C1>C1</option>
<option Value=C2>C2</option>
<option Value=C3>C3</option>
<option value=c4>C4</option>
<option value=C5>C5</option>
<option value=C6>C6</option>
</select></td>
<td width="4%" height="25"></td>
<td width="15%" height="25"></td>
<td width="27%" height="25"></td>
</tr>
<tr>
<td width="18%" height="25"></td>
<td width="9%" height="21"><div align="center">Annaul CTC</div></td>
<td width="32%" height="25"><input type="text" size="16" name="T3"></td>
<td width="4%" height="25"></td>
<td width="15%" height="25"></td>
<td width="27%" height="25"></td>
</tr>
</table>
<br>
<br>
<!--fieldset-->
<div align="left"></div>
<font color="red"><b>
<div id="Table1">
<table bgcolor="lightyellow" cellpadding="2" cellspacing="2" width="457"
align="center" id='mytable'>
<tr>
<th bgcolor="orange" width="113">Project</th>
<th bgcolor="orange" width="113">Location</th>
<th bgcolor="orange" width="117">Reports to</th>
<th bgcolor="orange" width="113">Remark</th>
</tr>
<tbody>
<tr>
<td bgcolor="orange" width="113"><font color="red"><b>
<input type=text name="N1" size="15"></b></font></td>
<td bgcolor="orange" width="113">
<center><input type=text name="N2" size="15"></center>
</td>
<td bgcolor="orange" width="117"><font color="red"><b>
<input type=text name="N3" size="15"></b></font></td>
<td bgcolor="orange" width="113">
<center><input type=text name="N4" size="15"></center>
</td>
</tr>
</tbody>
</table>
</div><br>
<center>
<INPUT id="Button1" style="color:darkorange;font:bold;background:white " type="button" value="AddRow" name="Button1" onClick="Add()" >
<INPUT id="Button2" style="color:darkorange;font:bold;background:white " type="button" value="DelRow" name="Button2" onClick="delrow();">
<input type="submit" name="submit" value="SUBMIT"
style="color:darkorange;font:bold;background:white ">
<input type="reset" name="reset" value="RESET"
style="color:darkorange;font:bold;background:white ">
<input type="button" value="<< BACK" title="Previous Page" onClick="goBack();" style="color:darkorange;font:bold;background:white " >
<input type="hidden" name="hiddeval"></center><!--/fieldset-->
<!--/fieldset-->
<input type="hidden" name="emp_id" value=<%=session.getAttribute("sessEmpid")%>>
<input type="hidden" name="rows" id="rows" value="0">
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="2"
height="249">
<tr>
<td class="dataHeader_other" align="center" height="245"></td>
</tr>
</table>
<script type="text/javascript">
Calendar.setup({
inputField : "f_date_a", // id of the input field
ifFormat : "%y-%m-%d ", // format of the input field
showsTime : true,
timeFormat : "24"
});
var a_fields = {
'T2':{'l':'Date of Join','r':true},
'T3':{'l':'Annual CTC','r':true,'f':'integer'},
'D1':{'l':'Job Grade','r':true},
'N1':{'l':'Project','r':true,'f':'alpha'},
'N2':{'l':'Location','r':true,'f':'alpha'},
'N3':{'l':'Report','r':true,'f':'alpha'},
'N4':{'l':'Remark','r':true,'f':'alpha'}
},
o_config = {
'to_disable' : ['submit','reset'],
'alert' : 1
}
// validator constructor call
var v = new validator('jobform', a_fields, o_config);
</script>
</title></body>
</html>[/HTML]