Validation For Dynamic Table

@hcl_techAug 02.2010

Here is my code for a table the “Add” button adds a dynamic row into the table.
I need to do a client side validation for the table so tht all the text boxes and the selection boxes shall have a value entered or selected. None should be left epty as well atleast one row of the table shall be complete.

Please help me with the validation

<table border=”0″ cellpadding=”1″ cellspacing=”0″ id=”tbl1″>
<thead>
<tr>
<th width=”120″>Name</th>
<th width=”60″>Port </th>
<th width=”60″>Index</th>
<th width=”120″>Connection</th>
<th width=”60″>Status</th>
<th width=”24″> </th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”6″><input type=”button” name=”button” onClick=”new(‘tbl1’)” value=”Add” /></td>
</tr>
</tfoot>
<tbody>
<tr>
<td width=”120″><input type=”text” name=”Name[]” size=”15″ /></td>
<td width=”60″><input type=”text” name=”Port[]” size=”4″ /></td>
<td width=”60″><input type=”text” name=”Index[]” size=”4″ /></td>
<td width=”120″><select name=”Connect[]” ><option selected >-Select-</option>
{html_options options=$lstConType}</select></td>
<td width=”60″><select name=”Status[]” ><option selected >-Select-</option>
{html_options options=$lstStatus}</select></td>
</tbody>
</table>
</div>

to post a comment

JavaScript

5 Comments(s) _↴

@tirnaAug 02.2010 — #Can you post the validation code you have so far?

I would prefer to not spend time writing code you might already have.

@hcl_techauthorAug 02.2010 — #This is the code i have as of now........ Please go thru the same.

<i>
 </i>&lt;script language="JavaScript" type="text/JavaScript"&gt;
 &lt;!--
 var oFrm = document.Frm_Add;
 var Portlength = oFrm.elements['Port[]'].length;
 var SBBlength = oFrm.elements['Index[]'].length;
 var Conn_Type = oFrm.elements['Connect[]'].length;
 
 function ChkLRUAdd()
 {
 
 
 <i>	</i>if(Portlength == undefined)
 <i>	</i>{
 <i>	</i>	if (!isInteger(oFrm.elements['Port[]'].value)) 
 <i>	</i>		{ 
 <i>	</i>			alert("Port should be Numeric");
 <i>	</i>			return false;
 <i>	</i>		}
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 <i>	</i>for(i=0; i&lt;=Portlength;i++)
 <i>	</i>	{
 <i>	</i> 		 if (!isInteger(oFrm.elements['Port[]'][i].value)) 
 <i>	</i>			{ 
 <i>	</i>				alert("Port should be Numeric");
 <i>	</i>				return false;
 <i>	</i>		}
 <i>	</i>	} 
 
 <i>	</i>}
 
 <i>	</i>if(SBBlength == undefined)
 <i>	</i>{
 <i>	</i>	if (!isInteger(oFrm.elements['Index[]'].value)) 
 <i>	</i>		{ 
 <i>	</i>			alert("Index should be Numeric");
 <i>	</i>			return false;
 <i>	</i>		}
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 <i>	</i>for(i=0; i&lt;=SBBlength;i++)
 <i>	</i>	{
 <i>	</i> 		 if (!isInteger(oFrm.elements['Index[]'][i].value)) 
 <i>	</i>			{ 
 <i>	</i>				alert("Index should be Numeric");
 <i>	</i>				return false;
 <i>	</i>		}
 <i>	</i>	} 
 
 <i>	</i>}
 
 
 <i>	</i>if(Conn_Type == undefined)
 <i>	</i>{
 <i>	</i>	if (!chkSelect(oFrm.elements['Connect[]'])) 
 <i>	</i>		{ 
 <i>	</i>			alert("Connection Type Not selected");
 <i>	</i>			return false;
 <i>	</i>		}
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 
 <i>	</i>for(i=0; i&lt;=Conn_Type;i++)
 <i>	</i>	{
 <i>	</i> 		 if (!chkSelect(oFrm.elements['Connect[]'][i].value)) 
 <i>	</i>			{ 
 <i>	</i>				alert("Connection Type Not selected");
 <i>	</i>				return false;
 <i>	</i>		}
 <i>	</i>	} 
 
 <i>	</i>}
 
 <i>	</i>  return true;
 }
 
 
 
 
 //--&gt;
 &lt;/script&gt;

@tirnaAug 02.2010 — #I'm a little confused ?

Did you write all this code or did you copy and paste it from somewhere and now want someone to get it working for you.?

The reason I ask is because you have a function called ChkLRUAdd() but you don't call it anywhere in your posted code.

You also have variables

[CODE] 
 var Portlength = oFrm.elements['Port[]'].length;
 var SBBlength = oFrm.elements['Index[]'].length;
 var Conn_Type = oFrm.elements['Connect[]'].length;
 [/CODE]

being assigned before the page is even loaded.

@hcl_techauthorAug 02.2010 — #No This has been written by me only the thing is tht the function is called on the form submit my form is a really big one couldn post the whole thing so just posted the part tht was bothering me...

@PadonakAug 02.2010 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Validate</title>
 <style type="text/css">
 body{padding-top:40px;}
 td{text-align:center}
 </style>
 <script type="text/javascript">
 <!--
 function ChkLRUAdd(){
 var frm = document.forms['Frm_Add'];
 var fields = frm.elements;
 for(var i = 0; i < fields.length; i++){
 if((fields[i].type == 'reset') || (fields[i].type == 'submit') || (fields[i].type == 'button')){continue;}
 else{
 if(fields[i].type == 'text' && fields[i].value.length < 1){alert('Empty field ' + fields[i].name); fields[i].focus(); return false;}
 if(fields[i].tagName == 'SELECT' && (fields[i].selectedIndex < 1)){alert('Nothing selected in ' + fields[i].name); fields[i].focus(); return false;}
 }
 }
 return true;
 }
 //-->
 </script>
 </head>
 <body>
 <div style="display:block; float:left; width: 480px; border:0px solid #F00;"> 
 <form id="Frm_Add" name="Frm_Add" action="" onsubmit="return ChkLRUAdd()">
 <table border="0" cellpadding="1" cellspacing="0" id="tbl1">
 <thead>
 <tr>
 <th width="120">Name</th>
 <th width="60">Port </th>
 <th width="60">Index</th>
 <th width="120">Connection</th>
 <th width="60">Status</th>
 <th width="24">&nbsp;</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td colspan="6"><input type="button" name="butn" onclick="new('tbl1')" value="Add" /></td>
 </tr>
 <tr>
 <td colspan="6">
 <input type="reset" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" />
 </td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <td width="120"><input type="text" name="Name[]" size="15" /></td>
 <td width="60"><input type="text" name="Port[]" size="4" /></td>
 <td width="60"><input type="text" name="Index[]" size="4" /></td>
 <td width="120">
 <select name="Connect[]">
 <option selected="selected">-Select-</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select>
 </td>
 <td width="60">
 <select name="Status[]">
 <option selected="selected">-Select-</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select>
 </td>
 </tr>
 </tbody>
 </table>
 </form>
 </div>
 </body>
 </html>[/CODE]

btw

[CODE]<div style="display:block; float:left; width: 480px; border:[COLOR="Red"]0px solid #F00[/COLOR];"> [/CODE]

this is a very strange declaration isn't it?

Also in #JavaScript _↴

how does google page fade on validate for numbers and letters Setting location of a frame from another frame from different domain.

Success!

Help @hcl_tech spread the word by sharing this article on Twitter...

Tweet This

Validation For Dynamic Table

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Validation For Dynamic Table

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴