Full Stack Developer Masters Program (66 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (16 Blogs)
  • Comprehensive Java Course (5 Blogs)
  • Java/J2EE and SOA (346 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

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

Published on Jun 10,2019 7.4K 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 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.

Javascript - javascript validation - edureka

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:

features of javascript - javascript validation - edureka

 

  • It is a Scripting Language and has nothing to do with Java. Initially, It was named Mocha, then changed to LiveScript and finally it was named as JavaScript.

  • JavaScript is an object-based programming language that supports polymorphism, encapsulation, and inheritance as well.

  • You can run JavaScript not only in the browser but also on the server and any device which has a JavaScript Engine.

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.

functions - javascript validation - edureka

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

  • The name of the function.

  • A list of parameters to the function, enclosed in parentheses and separated by commas.

  • The JavaScript statements that define the function, enclosed in curly brackets, { }.

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.

 

validation - javascript validation - edureka

 

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:

 

Output - Javascript validation - edureka

 

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:

 

Name field - javascript validation - edureka

 

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

 

password field - javascript validation - edureka

 

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 Web Development Course
Course NameDateDetails
Full Stack Web Development Course

Class Starts on 19th October,2024

19th October

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

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

edureka.co