JavaScript Validation : All You Need To Know About Validating Forms and Email

Published on Jun 10,2019 7.2K Views
A Data Science Enthusiast with in-hand skills in programming languages such as... A Data Science Enthusiast with in-hand skills in programming languages such as Java & Python.

JavaScript Validation : All You Need To Know About Validating Forms and Email

edureka.co

JavaScript is one of the most popular languages in Full-Stack, Front-end, and Back-end Development. It is used to create beautifully designed websites. In JavaScript, validation is used to authenticate a user. In this JavaScript Validation article, You will learn about form validation in the following sequence:

What is JavaScript?

JavaScript is a high level, interpreted programming language used to make web pages more interactive. It is a very powerful client-side scripting language which makes your webpage more lively and interactive.

It is a programming language that helps you to implement a complex and beautiful design on web pages. If you want your web page to look alive and do a lot more than just gawk at you, JavaScript is a must.

Features of JavaScript:

 

JavaScript Functions

The fundamental building blocks in JavaScript are called as Functions. It is basically a set of statements that performs a task or calculates a value. To use a function, it should be defined somewhere in the scope from which you wish to call it.

A function definition consists of the function keyword, followed by:

Let’s take an example and see how to define a function named add:


function add(a,b) {
return a+b;
}

 

Now, to validate a user, a validation function is used. So let’s move ahead and learn more about JavaScript validation.

What is Validation?

Validation is a method to authenticate the user. JavaScript provides the facility to validate the form on the client-side so data processing will be faster than server-side validation. It is preferred by most of the web developers. Through JavaScript, we can validate name, password, email, date, mobile numbers and more fields.

 

 

Client-side validation prevents the client from knowing whether the form is okay before reloading a page. Whereas, Server-side validation is important due to the fact that client-side validation can be completely bypassed by turning off JavaScript.

Now let’s move ahead with our JavaScript Validation article and have a look at the example of Form Validation.

JavaScript Validation: Example

The following example is a code in HTML, CSS, and JavaScript to validate a form where:

  1. HTML is used to create the form.
  2. JavaScript is 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>

This will give the following output:

 

 

Now, you need to create another file that will redirect the page to a new one after clicking submit button.

Text.html

<html>
 <head>
  <title>Form Validation</title>
   <script type="text/javascript">
   /**/
   </script>
 </head>
 <body> 
 <h1> Welcome to Edureka </h1>
 </body>
</html>

 

It will redirect to another page and give the following output:

Now, we need to add a Function in our JavaScipt to link the input id. This will pop up an alert message if any of the fields are left blank.

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;
}
}

 

This will pop the following alert when the Name field is left blank:

 

 

Next, if you enter the name and leave the Password field blank, it will pop the following alert:

 

 

Once you have added the name and password in the correct format, this page will be redirected to the Text.html page for the final output.

The complete code for Form Validation is as follows:

<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>

This was an example of form validation in JavaScript. we can also validate email id, password, mobile no. and many more.

So, let’s take another example and see how to validate email id using JavaScript.

JavaScript Email Validation

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

With this, we have come to the end of our JavaScript validation article. I hope you found this blog informative and gained a basic understanding of JavaScript validation.

Also, don’t forget to check out the Full Stack Web Developer Masters Program by Edureka. Got a question for us? Please mention it in the comments section of “JavaScript Validation” and we will get back to you.

Upcoming Batches For Full Stack Developer Course
Course NameDateDetails
Full Stack Developer Course

Class Starts on 27th April,2024

27th April

SAT&SUN (Weekend Batch)
View Details
BROWSE COURSES
REGISTER FOR FREE WEBINAR UiPath Selectors Tutorial