Javascript: Validation of multiple fields

@Divya_BhandaryJul 11.2012

I have to design a UI where i have multiple fields. I need to validate them if they are null. For two fields [App Port for Release 1 and App Port for Release 3], i need them to start with 4 and 6 respectively and 4 digits in length.

Please find the code. For some reason it is not working.

Also i have a table which on clicking ‘Add Row button’ an addtional row is cretaed. But I was not able to increment the row count for every increment in row and re-adjustement in row count when any of the rows is deleted.

<!DOCTYPE html>
<html>
<head>

function Validate()
{
var valid = true;

var msg=”Incomplete form:n”;
var count = 0;

var x1 = document.sform.app_name.value;
var x21 = document.sform.app_port1.value;
var x22 = document.sform.app_port2.value;
var x31 = document.sform.Work_dir1.value;
var x32 = document.sform.Work_dir2.value;
var x4 = document.sform.App_Log.value;
var x5 = document.sform.Test_URL.value;
var x6 = document.sform.Strt_Log.value;
var x7 = document.sform.Stop_Log.value;
var x8 = document.sform.Strt_Time.value;
var x9 = document.sform.Stop_Time.value;

if ( x1 == “” || x1 == null)
{

msg+=”You need to fill the name field!n”;
valid = false ;

}

if ( x21.length != 0 )
{

if (valid)

{
if(isNaN(x21)|| x.indexOf(” “)!=-1)
{
alert(“Enter numeric value that starts from 4 for App Port – Release 1”);valid = false;
return valid; }
else if ( x21.length != 4 ){
alert(“enter 4 characters”); valid = false;
return valid; }
else if (x21.charAt(0)!=”4″ ){
alert(“it should start with 4 “);
valid = false;
return valid; }
}
}
else
{

msg+=”You need to fill in App Port for Release 1!n”;

valid = false; }

if ( x22.length != 0 )
{

if (valid)

{
if(isNaN(x22)|| x.indexOf(” “)!=-1)
{
alert(“Enter numeric value that starts from 6 for App Port – Release 3”);valid = false;
return valid; }
else if ( x22.length != 4 ){
alert(“enter 4 characters”); valid = false;
return valid; }
else if (x22.charAt(0)!=”6″ ){
alert(“it should start with 6 “);
valid = false;
return valid; }
}
}
else
{

msg+=”You need to fill in App Port for Release 3!n”;

valid = false; }

if ( x31 == “” || x31 == null)
{

msg+=”You need to fill the Work Directory For Release 1!n”;
valid = false ;

}

if ( x32 == “” || x32 == null)
{

msg+=”You need to fill the Work Directory For Release 3!n”;
valid = false ;

}

if ( x4 == “” || x4 == null)
{

msg+=”You need to fill the App LOG !n”;
valid = false ;

}

if ( x5 == “” || x1 == null)

{

msg+=”You need to fill the Test URL !n”;
valid = false ;

}

if ( x6 == “” || x1 == null)
{

msg+=”You need to fill the Start up log!n”;
valid = false ;

}

if ( x7 == “” || x1 == null)

{

msg+=”You need to fill the Stop log !n”;
valid = false ;

}

if ( x8 == “” || x1 == null)
{

msg+=”You need to fill the Start Time out!n”;
valid = false ;

}

if ( x9 == “” || x1 == null)
{

msg+=”You need to fill the Stop Time out!n”;
valid = false ;

}

if (!valid) alert(msg);

return valid;

}

var count = “1”;
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName(“TBODY”)[0];
// create row
var row = document.createElement(“TR”);
// create table cell 1
var td1 = document.createElement(“TD”)
var strHtml1 = “<FONT SIZE=”+3″>*</FONT>”;
td1.innerHTML = strHtml1.replace(/!count!/g,count);
// create table cell 2
var td2 = document.createElement(“TD”)
var strHtml2 = “<INPUT TYPE=”text” NAME=”in_name” SIZE=”30″ MAXLENGTH=”30″ STYLE=”height:24;border: 1 solid;margin:0;”>”;
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement(“TD”)
var strHtml3 = “<INPUT TYPE=”text” NAME=”in_name” SIZE=”30″ MAXLENGTH=”30″ STYLE=”height:24;border: 1 solid;margin:0;”>”;
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement(“TD”)
var strHtml4 = “<INPUT TYPE=”text” NAME=”in_name” SIZE=”30″ MAXLENGTH=”30″ STYLE=”height:24;border: 1 solid;margin:0;” READONLY>”;
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 5
var td5 = document.createElement(“TD”)
var strHtml5 = “<INPUT TYPE=”Button” CLASS=”Button” onClick=”delRow()” VALUE=”Delete Row”>”;
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !=”TR”);
current.parentElement.removeChild(current);
}
</SCRIPT>

</head>

<body>

</tr>

<TD align=left class=”borderB” colspan=”2″ height=”25″>
<input type=”text” name=”app_port1″ id=”app_port1″ maxlength=”30″ size=”35″ >
<span><font color=#999999>(release 1)</font></span>
</td></tr>

<tr> <td class=”borderB” height=”25″> </td><td colspan=”2″ class=”borderB”>
<input type=”text” name=”app_port2″ id=”app_port2″ maxlength=”30″ size=”35″ >
<span><font color=#999999>(release 3)</font></span>
</td></tr>

<TR>
<TD valign=”top” class=”borderB” height=”25″>
Work Directory
<font class=starmand align=”absmiddle”>*</font>
</TD>

<TD align=left class=”borderB” colspan=”2″ height=”25″>
<input type=”text” name=”Work_dir1″ id=”Work_dir1″ maxlength=”30″ size=”35″ >
<span><font color=#999999>(release 1)</font></span>
</td></tr>

<tr> <td class=”borderB” height=”25″> </td><td colspan=”2″ class=”borderB”>
<input type=”text” name=”Work_dir1″ id=”Work_dir1″ maxlength=”30″ size=”35″ >
<span><font color=#999999>(release 3)</font></span>
</td></tr>

</tr>

</tr>

<tr>
<TD valign=”top” class=”borderB” height=”25″>
Start up log
<font class=starmand align=”absmiddle”>*</font>
</TD>
<TD align=left class=”borderB” colspan=”2″ height=”25″>
<input type=”text” name=”Strt_Log” id=”Strt_Log” maxlength=”30″ size=”35″ >
</td>

</tr>

</tr>

<tr>
<TD valign=”top” class=”borderB” height=”25″>
Start up time out
<font class=starmand align=”absmiddle”>*</font>
</TD>
<TD align=left class=”borderB” colspan=”2″ height=”25″>
<input type=”text” name=”Strt_Time” id=”Strt_Time” maxlength=”30″ size=”35″ >
</td>

</tr>

</tr>

<TABLE ID=”tblPets” border=”1″ STYLE=”border width:1 orange dashed;background color:#F0E68C;table-row width:2;”>
<TR><TH>Rownum</TH><TH WIDTH=”70″>App Name</TH><TH WIDTH=”230″>Start Time Line</TH><TH WIDTH=”230″>Stop Time Line</TH><TD ALIGN=”center”><INPUT TYPE=”Button” onClick=”addRow(‘tblPets’)” VALUE=”Add Row”></TD></TR>
</TR>
</TABLE>

</table>

</body>
</html>

Please help me.

Thanks in advance,
Divya

to post a comment

JavaScript

2 Comments(s) _↴

@Divya_BhandaryauthorJul 12.2012 — #Hi, I have re-done the code and have completed the validation part.

But when i run this .html doc on a system which prompts me to allow ActiveX pop up, the validation is working.

When I run the same .html doc on a system where i have nothing of ActiveX, the validations are not working.

Please help.

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Page</title>

<script language="javascript" type="text/javascript">

function validate()

{

var uid=document.login.app_name;

var passid1=document.login.app_port1.value;

var passid2=document.login.app_port2.value;

var wrk_dir1=document.login.work_dir1;

var wrk_dir2=document.login.work_dir2;

if(appname_validation(uid,4,20))

{

if(passid_validation1(passid1))

{

if(passid_validation2(passid2))

{

if (!workdir_validation(wrk_dir1,4,20))

{

return false;

}

}

}

}

return true;

}

function appname_validation(uid,mx,my)

{

var uid_len = uid.value.length;

if (uid_len == 0 || uid_len >= my || uid_len < mx)

{

alert("App Name should not be empty / length be between "+mx+" to "+my);

uid.focus();

return false;

}

return true;

}

function passid_validation1(passid)

{

var passid_len = passid.length;

if ( passid_len != 0 )

{

if(isNaN(passid))

{

alert("Enter numeric value that starts from 4 for App Port - Release 1");

passid.focus();

return false; }

else if ( passid_len != 4 ){

alert("Enter 4 characters for App Port for Release 1");

passid.focus();

return false; }

else if (passid.charAt(0)!="4" ){

alert("App Port for Release 1 should start with 4 ");

passid.focus();

return false; }

else

 return true; 
   }

else

{

alert("You need to fill in App Port for Release 1!");

return false;

}

}

function passid_validation2(passid)
{

var passid_len = passid.length;

if ( passid_len != 0 )

{

 if(isNaN(passid))
   {
   alert("Enter numeric value that starts from 4 for App Port - Release 3");
   passid.focus();
   return false;  }
   else  if ( passid_len != 4 ){
   alert("Enter 4 characters for App Port for Release 3"); 
   passid.focus();
   return false;                   }
   else  if (passid.charAt(0)!="6" ){
   alert("App Port for Release 3 should start with 6 ");
   passid.focus();
   return false;               }
   else
   return true;
 
   }

 <jsp:include page="index.jsp"></jsp:include> 
   <form  name="login" action="Jobs.jsp" method="post" onsubmit="return validate()"> 
 
   <div> 
   <table> 
   <tr> 
   <td><div> 
 
 
   </div></td> 
   <td width="411"><div> 
   <table width="500" height="316" bgcolor="#CCCCCC"> 
   <tr> 
   <td width="36"> </td> 
   <td width="316"> </td> 
   <td width="39"> </td> 
   </tr>

<tr>

<TD valign="top" class="borderB" height="25">

App Name

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="app_name" id="app_name" maxlength="30" size="35" >

</td>

</tr>

<TR>

<TD valign="top" class="borderB" height="25">

App Port

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="app_port1" id="app_port1" maxlength="30" size="35" >

<span><font color=#999999>(release 1)</font></span>

</td></tr>

<tr> <td class="borderB" height="25"> </td><td colspan="2" class="borderB">

<input type="text" name="app_port2" id="app_port2" maxlength="30" size="35" >

<span><font color=#999999>(release 3)</font></span>

</td></tr>

<TR>

<TD valign="top" class="borderB" height="25">

Work Directory

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="work_dir1" id="work_dir1" maxlength="30" size="35" >

<span><font color=#999999>(release 1)</font></span>

</td></tr>

<tr> <td class="borderB" height="25"> </td><td colspan="2" class="borderB">

<input type="text" name="work_dir2" id="work_dir2" maxlength="30" size="35" >

<span><font color=#999999>(release 3)</font></span>

</td></tr>

<tr>

<TD valign="top" class="borderB" height="25">

App LOG

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="app_Log" id="app_Log" maxlength="30" size="35" >

</td>

</tr>

<tr>

<TD valign="top" class="borderB" height="25">

Test URL

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="test_URL" id="test_URL" maxlength="30" size="35" >

</td>

</tr>

<tr>

<TD valign="top" class="borderB" height="25">

Start up log

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="Strt_Log" id="Strt_Log" maxlength="30" size="35" >

</td>

</tr>

<tr>

<TD valign="top" class="borderB" height="25">

Stop Log

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="Stop_Log" id="Stop_Log" maxlength="30" size="35" >

</td>

</tr>

<tr>

<TD valign="top" class="borderB" height="25">

Start up time out

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="Strt_Time" id="Strt_Time" maxlength="30" size="35" >

</td>

</tr>

<tr>

<TD valign="top" class="borderB" height="25">

Stop time out

<font class=starmand align="absmiddle">*</font>

</TD>

<TD align=left class="borderB" colspan="2" height="25">

<input type="text" name="Stop_Time" id="Stop_Time" maxlength="30" size="35" >

</td>

</tr>

<TR>

<TD class="borderB" colspan="3" height="25"><h3>Sub Apps</h3></TD>

</TR>

<TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#CCCCCC;table-row width:2;">

<TR><TH>Rownum</TH><TH WIDTH="70">App Name</TH><TH WIDTH="230">Start Time Line</TH><TH WIDTH="230">Stop Time Line</TH><TD ALIGN="center"><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></TD></TR>

</TR>

<TR>

<TH>*</TH>

<TH><INPUT TYPE="text" NAME="in_name1" SIZE="30" MAXLENGTH="30" STYLE="height:24;border: 1 solid;margin:0;"></TH>

<TH><INPUT TYPE="text" NAME="in_name2" SIZE="30" MAXLENGTH="30" STYLE="height:24;border: 1 solid;margin:0;"></TH>

<TH><INPUT TYPE="text" NAME="in_name3" SIZE="30" MAXLENGTH="30" STYLE="height:24;border: 1 solid;margin:0;"></TH>

<TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD>

</TR>

</TABLE>

<tr>

<td><div align="left"></div></td>

<td><input type="submit" name="Submit" value="Submit">

 </tr> 
 
   </table> 
   <p> </p> 
   </div></td> 
   </tr> 
   </table> 
  </div>

</form>

</body>

</html>

Thanks in advance.

@Divya_BhandaryauthorJul 12.2012 — #I have worked out the validation part.

But when i run the html doc on a system where I am prompted to allow ActiveX pop ups, the validations are working fine.

But when i run the html doc in a system where there is nothing to do with Active-X, the validations are not working. When i hit the Submit button, instead of the validations being initiated, i am being taken to the next screen.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Page</title>

<script language="javascript" type="text/javascript">

 function validate() 
   { 
   var uid=document.login.app_name; 
   var passid1=document.login.app_port1.value; 
   var passid2=document.login.app_port2.value;
   var wrk_dir1=document.login.work_dir1;
   var wrk_dir2=document.login.work_dir2;
   var app_Log=document.login.app_Log;
   var testurl=document.login.test_URL;
   var strt_log=document.login.Strt_Log;
   var stp_log=document.login.Stop_Log;
   var strtimeout=document.login.Strt_Time;
   var stoptimeout=document.login.Stop_Time;
 
   if(appname_validation(uid,4,20)) 
   { 
   if(passid_validation1(passid1)) 
   { 
   if(passid_validation2(passid2))
   {
   if (workdir_validation(wrk_dir1,4,20))
   {
   if (workdir_validation(wrk_dir2,4,20))
   {
   if (applog_validation(app_Log))
   {
   if (testurl_validation(testurl))
   {
   if (startstoplog_validation(strt_log))
   {
   if (startstoplog_validation(stp_log))
   {
   if (timeout_validation(strtimeout))
   {
   if (!timeout_validation(stoptimeout))
   {
   return false; 
   }
   }
   }
   }
   } 
   } 
   } 
   }
   }
   } 
   } 
   return true; 
   }

function appname_validation(uid,mx,my)

{

var uid_len = uid.value.length;

if (uid_len == 0 || uid_len >= my || uid_len < mx)

{

alert("App Name should not be empty / length be between "+mx+" to "+my);

uid.focus();

return false;

}

return true;

}

function passid_validation1(passid)

{

var passid_len = passid.length;

if ( passid_len != 0 )

{

 if(isNaN(passid))
   {
   alert("Enter numeric value that starts from 4 for App Port - Release 1");
   passid.focus();
   return false;  }
   else  if ( passid_len != 4 ){
   alert("Enter 4 characters for App Port for Release 1"); 
   passid.focus();
   return false;                   }
   else  if (passid.charAt(0)!="4" ){
   alert("App Port for Release 1 should start with 4 ");
   passid.focus();
   return false;               }
   else
 
   return true;
 
   }

else

{

alert("You need to fill in App Port for Release 1!");

return false;

}

}

function passid_validation2(passid)
{

var passid_len = passid.length;

if ( passid_len != 0 )

{

 if(isNaN(passid))
   {
   alert("Enter numeric value that starts from 4 for App Port - Release 3");
   passid.focus();
   return false;  }
   else  if ( passid_len != 4 ){
   alert("Enter 4 characters for App Port for Release 3"); 
   passid.focus();
   return false;                   }
   else  if (passid.charAt(0)!="6" ){
   alert("App Port for Release 3 should start with 6 ");
   passid.focus();
   return false;               }
   else
 
   return true;
 
   }

else

{

alert("You need to fill in App Port for Release 3!");

return false;

}

}

function workdir_validation(uid,mx,my)

{

var uid_len = uid.value.length;

if (uid_len == 0 || uid_len >= my || uid_len < mx)

{

alert("Work Directory should not be empty / length be between "+mx+" to "+my);

uid.focus();

return false;

}

return true;

}

function applog_validation(uid)

{

var uid_len = uid.value.length;

if (uid_len == 0)

{

alert("App Log should not be empty");

uid.focus();

return false;

}

return true;

}

function testurl_validation(uid)

{

var uid_len = uid.value.length;

if (uid_len == 0)

{

alert("Test URL should not be empty");

uid.focus();

return false;

}

return true;

}

function startstoplog_validation(uid)

{

var uid_len = uid.value.length;

if (uid_len == 0)

{

alert("Start/Stop Log should not be empty");

uid.focus();

return false;

}

return true;

}

function timeout_validation(uid)

{

var uid_len = uid.value.length;

if (uid_len == 0)

{

alert("Start Time Out/Stop Time Out Log should not be empty");

uid.focus();

return false;

}

return true;

}

</script>

</head>

Also in #JavaScript _↴

selectboxes clear error Need Button Help!Helping the garbage collector?

Success!

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

Tweet This

Javascript: Validation of multiple fields

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript: Validation of multiple fields

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴