http://www.guru99.
com/
Process to Validate
HTML Form with
Javascript
1
http://www.guru99.com/
Scenario
As shown in screenshot, following validations are set on various fields in the Fund Trasnfer Module
Lets consider a validation of a single field
As per SRS Technical Requirement - T91
DESCRIPTION CANNOT BE BLANK
In HTML, we are calling the function validatedesc() onBlur
<td>Description</span></td>
<td><input type="text" name="desc" value="" onBlur="validatedesc()"
onKeyUp="validatedesc()"/>
<label id="message17"></label> </td>
When the user finishes entering value in this field and moves to next field , onBlur event will be
triggerred & Following function is called,
function validatedesc()
{
var des = document.forms[0]["desc"].value; // get the value of filed
2
http://www.guru99.com/
if (des == null || des == "") // check if value is null or blank
{ //if yes = show an error message
document.getElementById('message17').style.visibility = "visible";
document.getElementById('message17').innerHTML = "Description can not
be blank";
}
else
{ //if no = do nothing
document.getElementById('message17').style.visibility = "hidden";
}
}
Steps to Validate Entire Form
In order to validate the entire form you need to do 2 set of activities
1) Include the test.js File
2) Call the respective functions in the fields of the form
Here is the complete form with Validations for FundTransfer
Code
<html>
<!--comments: To transfer fund-->
<head>
<!--comments: To link to a common cascading style sheets-->
<link rel="stylesheet" type="text/css" href="../css/style.css">
<!--comments: To link to javascript files-->
<script language="JavaScript" src="../JavaScript/test.js"></script>
<div><h2 class="barone">Guru99 Bank</h2></div>
<div><div><ul class="menusubnav">
<li class="orange"><a href="Customerhomepage.php">Customer</a></li>
<li><a href="BalEnqInput.php">Balance Enquiry</a></li>
<li><a href="customerfundinput.php">Fund Transfer</a></li>
<li><a href="PasswordInput.php">Changepassword</a></li>
<li><a href="MiniStatementInput.php">Mini Statement</a></li>
3
http://www.guru99.com/
<li><a href="Logout.php">Log out</a></li>
</ul>
</div>
</div>
<title>Fund Transfer Entry Page </title>
</head>
</head>
<body>
<br/><br/><br/><br/>
<table class="layout1" border="0" align="center">
<form name="addcust" method ="POST" action ="customerfund.php"
onsubmit="return validateFundTransfer();">
<tr>
<td align="center" colspan="2"><p class="heading3">Fund
Transfer</p></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Payers account no</td><td><input type="text"
name="payersaccount" value="" onBlur="validatepayersaccountno()" onKeyUp
="validatepayersaccountno()"/> <label id="message10"></label>
</tr>
<tr>
<td>Payees account no</td>
<td>
<input type="text" name="payeeaccount" value=""
onBlur="validatepayeeaccountno()" onKeyUp="validatepayeeaccountno()" />
<label id="message11"></label>
</td>
</tr>
<tr>
<td>Amount</td><td><input type="text" name="ammount"
maxlength = "8" onBlur="validateammount()" onKeyUp="validateammount()"/>
<label id="message1"></label></td>
</tr>
<tr>
<td>Description</span></td><td><input type="text" name="desc"
value="" onBlur="validatedesc()" onKeyUp="validatedesc()"/> <label
id="message17"></label> </td>
4
http://www.guru99.com/
</tr>
<tr><input type="hidden" name="formid" value="”/>
<td></td>
<td><input type="submit" name="AccSubmit" value="Submit"
onClick=" return validateone();">
<input type="reset" name="res" value="Reset"></td>
</tr>
</form>
</table>
<p align="right"><a href="Customerhomepage.php">Home</a></p>
</body>
</html>
Now , the validation functions are called on onclick(), onkeyup(), onblur(), onsubmit() events from
the test.js file called in the HEAD section.
