We will validate an Email and Form using Javascript, We will learn in a simple ways make Email validation is very simple by taking simple easy steps same steps you can follow for Form validation using JavaScript. Let's find the solution to "How to validate an email address using Javascript". First, we will solve an Email verification problem after that we move to second and most important problem Form validation using Javascript so don't worry just follow the steps and read this article carefully, I make sure to clear your all doubt's. Lets first understand the how client and server communicate each other. After the end of this post try to design a nice student registration form using HTML, CSS, and Javascript. Student registration form in HTML with javascript validation
This is the architecture with the help of which we communicate daily through the internet. And there are two types of scripting languages
(1) Client-Side Scripting language
(2) Server-side Scripting language.
🌟🌟Free Download Web Designing Projects Visit: Web Designing and Web Developing
And that is what client-side scripting language is JavaScript, JavaScript communicates server side asynchronously. Basically server-side scripting language is for connecting to the database and getting data from DB(Database) according to the request.
JavaScript is a high level, un-typed and interpreted programming. JavaScript is platform independent. Both Java and JavaScript are Different things other than some naming and standard. JavaScript is a lightweight language used to design web applications. We need HTML and CSS to design the web pages and JavaScript is used to add functionality, validation form, communicating with the server and Read-Write HTML elements. JavaScript is a client-side scripting language. Communicating with the server is done by using AJAX. When we run JavaScript code on the browser and when browser come to know that JavaScript code is there then interpreter starts its working, Interpreter come equipped with browsers. And How browser come to know that JavaScript code is there, Because of our <Script> </Script> tag in the code.
There are two ways to embedding JavaScript with HTML:
(i) Inside HTML file or
(ii) Create a .js file of JavaScript code and connect it to HTML.
Starting with JavaScript I am going to use Notepad++ for validating Email address textbox using JavaScript.
#Using JavaScript inside HTML using <Script> </Script> Tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Hello </title>
<script type="text/javascript">
document.write("Hello World");
</script>
</head>
<body>
</body>
</html>
#Using JavaScript in the External file:
Script tag will not be there in the .js file, we will add this tag in HTML file with a “source attribute”: Create a hello.js file and write the code in the file:
document.write("Hello World");
And write the code in HTML file for Javascript Email validation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Hello </title>
<script language="javascript" type="text/javascript" src="hello.js"></script>
<body>
</body>
</head>
</html>
Programs for validating an Email Using Javascript:
<!DOCTYPE html>
<html>
<head>
<title> Email Validation </title>
<script type="text/javascript">
function validation(event)
{
event & event.preventDefault();
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var emailVal = document.forms["testForm"]["emailInput"].value;
console.log(emailVal);
if (reg.test(emailVal) == false)
{
alert('Invalid Email Address');
return false;
}
alert('Valid Email Address');
return true;
}
</script>
</head>
<body>
<form name="testForm" onSubmit="return validation(event)">
<label> Email </label>
<input type="text" name="emailInput" required/>
<br />
<button>Submit</button>
</form>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<title> Email Validation </title>
<script type="text/javascript">
function validation(event)
{
event & event.preventDefault();
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var emailVal = document.forms["testForm"]["emailInput"].value;
var contact = document.forms["testForm"]["contact"].value;
var pwd = document.forms["testForm"]["pwd"].value;
var confirmPwd = document.forms["testForm"]["confirmPwd"].value;
if (reg.test(emailVal) == false)
{
alert('Invalid Email Address');
return false;
}
if (contact.length != 10)
{
alert('Your Contact No. should have 10 Digits');
return false;
}
if (pwd != confirmPwd)
{
alert('Password Should match in both fields');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="testForm" onSubmit="return validation(event)">
<label for="fullName">Full Name </label>
<input type="text" name="fullName" placeholder="Full Name" required/>
<br/><br/>
<label for="emailInput"> Email </label>
<input type="text" name="emailInput" placeholder="Email Address" required/>
<br/><br/>
<label for="contact"> Contact No. </label>
<input type="number" name="contact" placeholder="10 digit Phone No." required/>
<br/><br/>
<label for="pwd"> Password </label>
<input type="text" name="pwd" placeholder="Password" required/>
<br/><br/>
<label for="confirmPwd"> Confirm Password </label>
<input type="text" name="confirmPwd" placeholder="Password" required/>
<br/><br/>
<button>Submit</button>
</form>
</body>
</html>
Output:
Conclusion: So we learn in this post Validating form using JavaScript or Email Validation Using JavaScript or JavaScript form validation through the internal and external file in a simple way. This program is a demo for validating an Email and Form using HTML and JavaScript.
Author: This Javascript tutorial for an Email and Form validation is provided by Suman Yadav. Thanks, Suman for the Awesome and Unique article. If you want to submit your article and want to be a member of our ProgrammingWithBasics Family Join us by sending a well-written article more information read Write for Us
This is the architecture with the help of which we communicate daily through the internet. And there are two types of scripting languages
(1) Client-Side Scripting language
(2) Server-side Scripting language.
🌟🌟Free Download Web Designing Projects Visit: Web Designing and Web Developing
And that is what client-side scripting language is JavaScript, JavaScript communicates server side asynchronously. Basically server-side scripting language is for connecting to the database and getting data from DB(Database) according to the request.
JavaScript is a high level, un-typed and interpreted programming. JavaScript is platform independent. Both Java and JavaScript are Different things other than some naming and standard. JavaScript is a lightweight language used to design web applications. We need HTML and CSS to design the web pages and JavaScript is used to add functionality, validation form, communicating with the server and Read-Write HTML elements. JavaScript is a client-side scripting language. Communicating with the server is done by using AJAX. When we run JavaScript code on the browser and when browser come to know that JavaScript code is there then interpreter starts its working, Interpreter come equipped with browsers. And How browser come to know that JavaScript code is there, Because of our <Script> </Script> tag in the code.
There are two ways to embedding JavaScript with HTML:
(i) Inside HTML file or
(ii) Create a .js file of JavaScript code and connect it to HTML.
Starting with JavaScript I am going to use Notepad++ for validating Email address textbox using JavaScript.
#Using JavaScript inside HTML using <Script> </Script> Tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Hello </title>
<script type="text/javascript">
document.write("Hello World");
</script>
</head>
<body>
</body>
</html>
#Using JavaScript in the External file:
Script tag will not be there in the .js file, we will add this tag in HTML file with a “source attribute”: Create a hello.js file and write the code in the file:
document.write("Hello World");
And write the code in HTML file for Javascript Email validation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Hello </title>
<script language="javascript" type="text/javascript" src="hello.js"></script>
<body>
</body>
</head>
</html>
Programs for validating an Email Using Javascript:
1) Email Validation Using JavaScript With Output
<!DOCTYPE html>
<html>
<head>
<title> Email Validation </title>
<script type="text/javascript">
function validation(event)
{
event & event.preventDefault();
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var emailVal = document.forms["testForm"]["emailInput"].value;
console.log(emailVal);
if (reg.test(emailVal) == false)
{
alert('Invalid Email Address');
return false;
}
alert('Valid Email Address');
return true;
}
</script>
</head>
<body>
<form name="testForm" onSubmit="return validation(event)">
<label> Email </label>
<input type="text" name="emailInput" required/>
<br />
<button>Submit</button>
</form>
</body>
</html>
Output:
2) Form Validation Using Javascript With Source Code and Output
<!DOCTYPE html>
<html>
<head>
<title> Email Validation </title>
<script type="text/javascript">
function validation(event)
{
event & event.preventDefault();
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var emailVal = document.forms["testForm"]["emailInput"].value;
var contact = document.forms["testForm"]["contact"].value;
var pwd = document.forms["testForm"]["pwd"].value;
var confirmPwd = document.forms["testForm"]["confirmPwd"].value;
if (reg.test(emailVal) == false)
{
alert('Invalid Email Address');
return false;
}
if (contact.length != 10)
{
alert('Your Contact No. should have 10 Digits');
return false;
}
if (pwd != confirmPwd)
{
alert('Password Should match in both fields');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="testForm" onSubmit="return validation(event)">
<label for="fullName">Full Name </label>
<input type="text" name="fullName" placeholder="Full Name" required/>
<br/><br/>
<label for="emailInput"> Email </label>
<input type="text" name="emailInput" placeholder="Email Address" required/>
<br/><br/>
<label for="contact"> Contact No. </label>
<input type="number" name="contact" placeholder="10 digit Phone No." required/>
<br/><br/>
<label for="pwd"> Password </label>
<input type="text" name="pwd" placeholder="Password" required/>
<br/><br/>
<label for="confirmPwd"> Confirm Password </label>
<input type="text" name="confirmPwd" placeholder="Password" required/>
<br/><br/>
<button>Submit</button>
</form>
</body>
</html>
Output:
Conclusion: So we learn in this post Validating form using JavaScript or Email Validation Using JavaScript or JavaScript form validation through the internal and external file in a simple way. This program is a demo for validating an Email and Form using HTML and JavaScript.
Author: This Javascript tutorial for an Email and Form validation is provided by Suman Yadav. Thanks, Suman for the Awesome and Unique article. If you want to submit your article and want to be a member of our ProgrammingWithBasics Family Join us by sending a well-written article more information read Write for Us
