Advanced Java and Web Technologies for JNTUK
Blog providing beginner tutorials on different web technologies like HTML, CSS, Javascript, PHP, MYSQL, XML, Java Beans, Servlets, JSP and AJAX
Subscribe to Startertutorials.com's YouTube channel for different tutorial and lecture videos.

Categories: Javascript. No Comments on Form Validation
0
(0)

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.

 


Subscribe to our monthly newsletter. Get notified about latest articles, offers and contests.


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.

How useful was this post?

Click on a star to rate it!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Suryateja Pericherla

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.

Note: Do you have a question on this article or have a suggestion to make this article better? You can ask or suggest us by filling in the below form. After commenting, your comment will be held for moderation and will be published in 24-48 hrs.

Leave a Reply

Your email address will not be published. Required fields are marked *