JavaScript Validation: Step by Step Guide to Validation of Forms and Emails
JavaScript makes websites interactive and it helps developers to build front-end, back-end, and full-stack development easily.
We can also validate the user to verify the authorized user through JavaScript.
Here in this article, we are going to present a step-by-step guide on how can we validate forms and emails through JavaScript.
What is JavaScript?
JavaScript is an interpreted programming language used to build impressive and interactive web pages and it is a client-side scripting language that helps developers create web pages livelier.
It also helps developers implement complex as well as beautiful designs on web pages. Following are the unique features of JavaScript.
- Powerful Scripting Language
- Object-Oriented Programming Language
- Supports polymorphism, inheritance, and encapsulation
- Run on browser and server with a JavaScript Engine
JavaScript Functions
Functions are the fundamental building blocks of JavaScript and they are set statements that can be used to perform a task repeatedly.
It must be defined in the scope to be used in a program.
A function definition contains the function keyword followed by the name of the function, a list of parameters or variables that should be enclosed with parentheses and separated by commas, and JavaScript statements to define a function that should be enclosed in curly brackets.
Example
function add(a,b)
{
return a+b;
}
JavaScript Validation
Validation is used to authenticate users of the website and JavaScript offers various features to perform validation on the form of the client-side.
It fastens the data processing than the validation that is performed on the server-side.
JavaScript is used to validate names, passwords, email, dates, contact numbers, and so on.
Client-side validation is the top priority of many developers as it prevents the client from understanding the form even before the page reloads.
However, server-side validation can also be done when the client-side validation bypasses by turning off JavaScript.
Example
In the following example, we use codes in HTML, CSS, and JavaScript for validating a form. Here, HTML codes are used to create the form, and JavaScript codes are used to validate the form.
FormValidation.html
<html>
<head>
<title>form validation</title>
<script>
/**/
</script>
</head>
<body>
<form name=”myform” method=”post” action=”Text.html” onsubmit=”return validateform()”
Name: <input type=”text” name=”name”><br/>
Password: <input type=”password” name=”password”><br/>
<input type=”submit” value=”register”></form></body></html>
Output
Now, we can create another file for redirecting the page to a new one by clicking the register button.
Text.html
<html>
<head>
<title> Form Validation </title>
<script type = “text/javascript”>
<**>
</script>
</head>
<body>
<h1>Welcome to Softlogic </h1>
<body>
</html>
Now the page will be redirected and shows the following output
Then, we have to add a function to our JavaScript for linking the input id. It is to pop up the alert message when empty fields are there.
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==””){
alert(“Name can’t be blank”);
return false;
}
else if(password.length<6){
alert(“Password must be atleast 6 characters long.”);
return false;
}
}
Output
Complete Code for Form Validation
<html>
<head>
<title>form validation</title>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==””)
{
alert(“Name can’t be blank”);
return false;
}
else if(password.length<6)
{
alert(“Password must be atleast 6 characters long.”);
return false;
}
}
</script>
</head>
<body>
<form name=”myform” method=”post” action=”Text.html” onsubmit=”return validateform()”
Name: <input type=”text” name=”name”><br/>
Password: <input type=”password” name=”password”><br/>
<input type=”submit” value=”register”>
</form>
</body>
</html>
Email Validation in JavaScript
Email.html
function ValidateEmail(inputText) {
var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(inputText.value.match(mailformat)) {
document.form1.text1.focus();
return true; } else {
alert(“You have entered an invalid email address!”);
document.form1.text1.focus();
return false; } }
Output
Conclusion
We hope this article gives you a fundamental understanding of validation with JavaScript.
Get complete practical experiences by enrolling in our JavaScript Training in Chennai at Softlogic.
