JavaScript Form Validation:How To Validate Users Input using JavaScript

Admin Sunday, September 27, 2020 Javascript





Introduction
What is Form Validation
Scenarios of Form Validation
How To Validate Users Input
Password Validation using Javascript
Javascript Password Validation Example

Introduction
There have been many cases where some of us mostly web developers need to validate users input before firing our JavaScript functions.
Am going to teach you how to perform form validation using JavaScript.
Form validation matters alot because you can never tell the kind of visitors that you might have on your site.
There are some visitors that will read carefully before doing anything online why some, reverse is the case.
So ensuring that your site is well developed is a very crucial decision as it will also makes your site users to trust on you and feel safe anytime they are on your site.
What is Form Validation
Form validation simply means checking users' inputs to ensure that input fields are not empty. Why on the course of checking, a friendly message is displayed to user based on the kind of action taken by the user. For instance access denied can be displayed if user supply invalid credentials. Same way to when user supply valid details. 
Scenarios of Form Validation

Your ability to check this is through the use of JavaScript which is what we want to discuss here today.
Form validation can be used for many scenarios ranging from email validation, name validation, password validation e.t.c it all depends on your own purpose of use.
How To Validate Users Input
The HTML design. Copy and paste these but I would recommend typing them so that you can understand the flow
<html>
<head>
<title>JavaScript Input Fields Validation</title>

</head>
<body>  
<form>  
<center>
Username: <input type="text" id="uname"><br/>  
Password: <input type="password" id="pwd"><br/>  
<input type="submit" onclick="validate ();" value="Login">  
</center>
</form>  
</body>
</html>

We need JavaScript script to be able to validate the users input. So place this script between the head tags
 
function validate(){  
var ErrMsg="Access denied. Enter password and username";
var SucMsg="Access granted";
var uname=document.getElementById(&quot;uname&quot;);  
var pwd=document.getElementById(&quot;pwd&quot;);  
  
if (uname.value !="" && pwd.value != "")
{  
  alert(SucMsg);  
//you can use window.location.href.replace("pagename.html") to navigate to the target page
  return true;  
}
else 
{  
  alert(ErrMsg);  
  return false;  
  }  
}  
&lt;/script&gt;  

Password Validation using Javascript

Now that you have known how to validate user's input, let us see how you can extend that to password validation.
Password valid simply means ensuring that the user confirm his or her password before hitting the submit button.
See below for demonstration
Javascript Password Validation Example

<html>
<head>
<title>Password Validation</title>
<script>  
function validate(){  
var ErrMsg="Account creation failed. Enter password and username";
var SucMsg="Account creation was successful";
var uname=document.getElementById(&quot;uname&quot;);  
var pwd=document.getElementById(&quot;pwd&quot;);  
  var cpwd=document.getElementById("cpwd");
if (uname.value !="" && pwd.value != "" && cpwd.value != "")
{  
//checking to see if password match
  if(pwd.value == cpwd.value)
{
alert(SucMsg);
}
else{
alert ("Password didn't match");
} 
}
else 
{  
  alert(ErrMsg);  
  return false;  
  }  
}  
</script>  
</head>
<body>  
<form>  
<center>
<h1>Registration Page</h1>
Username: <input type="text" id="uname"><br/>  
Password: <input type="password" id="pwd"><br/>
Confirm Password: <input type="password" id="cpwd"><br/>  
<input type="submit" onclick="validate ();" value="Register">  
</center>
</form>  
</body>
</html>