Scribd
Upload
27 views

Process To Validate HTML Form With Javascript

This document discusses validating HTML forms with JavaScript. It provides an example of validating a single form field for required text on blur and keyup events. It also outlines steps to validate an entire form: 1) Include the JavaScript validation file and 2) Call the validation functions in each form field. An example HTML form with multiple fields is given, calling validation functions on appropriate events to validate the entire fund transfer form.

Uploaded by

Durgesh parlewar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

Process To Validate HTML Form With Javascript

This document discusses validating HTML forms with JavaScript. It provides an example of validating a single form field for required text on blur and keyup events. It also outlines steps to validate an entire form: 1) Include the JavaScript validation file and 2) Call the validation functions in each form field. An example HTML form with multiple fields is given, calling validation functions on appropriate events to validate the entire fund transfer form.

Uploaded by

Durgesh parlewar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like