One of the best uses of client-side JavaScript is the form validation. The input given by the user can be validated either on the client-side or on the server-side.
By performing validation on the client-side using JavaScript, the advantages are less load on the server, saving network bandwidth and quicker response for the users.
Form input can be validated using different events, but the most common event used is submit i.e when the submit button is clicked. Corresponding attribute to be used is onsubmit of the form tag. Let’s consider a simple form as shown below:
//HTML Code
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form id="loginForm" action="next.html">
Username: <input type="text" id="txtuser" /><br />
Password: <input type="pass" id="txtpass" /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
//JavaScript Code - script.js
function checkData( )
{
var txtuser = document.getElementById("txtuser").value;
var txtpass = document.getElementById("txtpass").value;
if(txtuser == "")
{
alert("Username must not be blank!");
return false;
}
if(txtpass == "")
{
alert("Password must not be blank!");
return false;
}
return true;
}
document.getElementById("loginForm").onsubmit = checkData;
The above example can be written in another way as shown below:
//HTML Code
<html>
<head>
<title>Login Form</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form id="loginForm" action="next.html" onsubmit="return checkData( );">
Username: <input type="text" id="txtuser" /><br />
Password: <input type="pass" id="txtpass" /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>
//JavaScript Code - script.js
function checkData( )
{
var txtuser = document.getElementById("txtuser").value;
var txtpass = document.getElementById("txtpass").value;
if(txtuser == "")
{
alert("Username must not be blank!");
return false;
}
if(txtpass == "")
{
alert("Password must not be blank!");
return false;
}
return true;
}
The general validation process is to check whether the user input matches the requirements. If it matches return true which will make the browser shift the control to the page mentioned in the action attribute of the form tag. Otherwise display appropriate error message and return false which will make the control stay in the current page.
Suryateja Pericherla, at present is a Research Scholar (full-time Ph.D.) in the Dept. of Computer Science & Systems Engineering at Andhra University, Visakhapatnam. Previously worked as an Associate Professor in the Dept. of CSE at Vishnu Institute of Technology, India.
He has 11+ years of teaching experience and is an individual researcher whose research interests are Cloud Computing, Internet of Things, Computer Security, Network Security and Blockchain.
He is a member of professional societies like IEEE, ACM, CSI and ISCA. He published several research papers which are indexed by SCIE, WoS, Scopus, Springer and others.
Leave a Reply