In this article, we are going to explain about email validation in JavaScript. Thus, I discuss with the example of HTML code and JavaScript.
As well as, with the help of email validation in JavaScript on button click. Firstly, create input fields from the form and how to implement validation in the below section.
Table of Contents
Email Validation in JavaScript
The email validation using JavaScript you can implement to run this code on your project email validation using JavaScript. Under, copy, and paste this code.
<!DOCTYPE html>
<html>
<head>
<title>Email validation</title>
<script type="text/javascript">
function email_funnction() {
var email = document.emailform.email.value;
if(email.indexOf('@')<=0){
document.getElementById('errormsg').innerHTML="Invalid your Email Address";
return false;
}
if ((email.charAt(email.length-4)!='.') && (email.charAt(email.length-3)!='.')) {
document.getElementById('errormsg').innerHTML="Invalid your Email Address";
return false;
}
}
</script>
</head>
<body>
<h1>Email Validation in javascript</h1>
<span id="errormsg"></span>
<form name="emailform" onsubmit="return email_funnction()">
<label>Email</label>
<input type="text" name="email" value="">
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Here, Run code output on the screen
In this case, you can learn the above section provide the email validation in JavaScript. So, the HTML created a form in which defines an input field and also defines the submit button using javascript function
Firstly, insert HTML structure for creating form. After that, the head section started the script section for the implementation of the function. Thus, we called a function namely email_funnction().
<script type="text/javascript">
function email_funnction() {
var email = document.emailform.email.value;
if(email.indexOf('@')<=0){
document.getElementById('errormsg').innerHTML="Invalid your Email Address";
return false;
}
if ((email.charAt(email.length-4)!='.') && (email.charAt(email.length-3)!='.')) {
document.getElementById('errormsg').innerHTML="Invalid your Email Address";
return false;
}
}
</script>Here you can see the result of email invalid
As a result, the above section shows you the output of the JavaScript code. As well as, show a message invalid your email address. Again, you can print the message anything else on the scripting code.
Then, let’s start about body section we need a form and given a function name is email function. Additionally, created two fields in the form first input text fields name email and another field a submit button.
<body>
<h1>Email Validation in javascript</h1>
<span id="errormsg"></span>
<form name="emailform" onsubmit="return email_funnction()">
<label>Email</label>
<input type="text" name="email" value="">
<input type="submit" name="" value="Submit">
</form>
</body>What is JavaScript Validation?
Hence, as we know need JavaScript validation because when they make mandatory(important) fields. So, why we need to apply for validation many technical people know about it. but, don’t know another person why we using validation.
For example, we register any form on the web page. So, there have many fields. Hence, name address some fields important for your identity and contact to your relative the queries and any other some conditions.
How do I Validate my Email?
Firstly, many options for validation of email. Here, I have to mention many examples with the code in the above section. As well as discuss relative another topic whole form validation using JavaScript.
Email Validation in JavaScript on Button Click
Here, for email validation created on-click button submit action. For example, Whenever clicking the submits button to the form then on click button function coll. After that, pass the value of the field to function code.
<form name="emailform" onsubmit="return email_funnction()">
<label>Email</label>
<input type="text" name="email" value="">
<input type="submit" name="" value="Submit">
</form>After all, the above section shows the form and also showing the on-submit JavaScript event. So, which is to perform the return the functions with the values of fields?
Therefore, according to JavaScript on click event using a function. So, in which added a condition of email validations in JavaScript and through showing a message of email validations.
Simple Email Validation in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Email validation</title>
<script type="text/javascript">
function email_funnction() {
var email = document.forms["emailform"]["email"].value;
if (email == "") {
alert("Insert your Email");
return false;
}
}
</script>
<style type="text/css">
body {
background-color: #2B233B;
font-size: larger;
color: #fff;
text-align: center;
margin-top: 200px;
}
</style>
</head>
<body>
<h1>Simple Email Validation in javascript</h1>
<span id="errormsg"></span>
<form name="emailform" onsubmit="return email_funnction()">
<label>Email</label>
<input type="text" name="email" value="">
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Here, output Simple email validation code
Hence, there a simple email validation in JavaScript code. For example, the above section created to function with on submit event whole form event similarly.
So, apply this simple code to your project. Also, add something else fields on this form as your recruitment. Also, find relative javascript date format mm dd yyyy
Password Validation in JavaScript
Similarly, you implement password validation using JavaScript. Thus, given a password on your form apply condition like above email code section. So, see the code below and try this.
<!DOCTYPE html>
<html>
<head>
<title>Pass validation</title>
<script type="text/javascript">
function pass_funnction() {
var pass = document.forms["passform"]["password"].value;
if (pass == "") {
alert("Insert your password");
return false;
}
}
</script>
</head>
<body>
<h1>Pass Validation in javascript</h1>
<span id="errormsg"></span>
<form name="passform" onsubmit="return pass_funnction()">
<label>Password</label>
<input type="Password" name="password" value="">
<input type="submit" name="" value="Submit">
</form>
</body>
</html>
Here, Output of Password validation using JavaScript code
Afterward, in this code showing an alert box for password validation using javascript. In addition, as you know the same as for password validation. Also, learn more about javascript change background color
Hence, created a from in this code two input password and submit for validation. So, through JavaScript functions submit event action on this code.
After that, as we know about javascript using tags in the function. Importantly, the document in which used to print the element of JavaScript. As well as, target form fields with this document.forms[“passform”][“password”].value;
JavaScript Form Validation
Likewise, we are given a whole form maximum field validation example with the JavaScript code. So, JavaScript form validation should be a form and multiple fields on the page.
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<script type="text/javascript">
function pass_funnction() {
var name = document.forms["passform"]["name"].value;
var lastname = document.forms["passform"]["lastname"].value;
var address = document.forms["passform"]["address"].value;
var email = document.forms["passform"]["email"].value;
var pass = document.forms["passform"]["password"].value;
if (name == "") {
alert("Insert your name");
return false;
}
if (lastname == "") {
alert("Insert your lastname");
return false;
}
if (address == "") {
alert("Insert your address");
return false;
}
if (email == "") {
alert("Insert your email");
return false;
}
if (pass == "") {
alert("Insert your password");
return false;
}
}
</script>
</head>
<body>
<h1>javascript Form Validation</h1>
<span id="errormsg"></span>
<form name="passform" onsubmit="return pass_funnction()">
<label>First Name</label>
<input type="text" name="name" value="">
<label>Last Name</label>
<input type="text" name="lastname" value="">
<label>Address</label>
<input type="text" name="address" value="">
<label>Email</label>
<input type="text" name="email" value="">
<label>Password</label>
<input type="Password" name="password" value="">
<input type="submit" name="" value="Submit">
</form>
</body>
</html>
Here, Output of the form validation all fields with code using JavaScript
Thus, we explain with the code whole form validation. So, added multiple input fields using form and impediment these fields on the function. Likewise, email and password which define the above section.
Here, We showing fields name of form validation. Firstly, Name, Last name, address, Email, Password. So, These are some fields that are added to the validation form and an alert message showing the difference.
As well as, whenever are put this code then you should change the message as per field name. So, as you want to show the likewise “insert your email address“.
Firstly, you created an HTML form and insert multiple inputs as you want in your form. After that, mention the name of the input fields in your form code.
Secondly, we added an on submitting JavaScript function on the form when they click the submit button. Afterward, create the event with the passing the value through the JavaScript syntax.
After that, mention the document write and then form name as well as the field name in the function. So, I added the name similar name of input fields and document syntax which has a function.
Conclusion
Finally, mention the code of email validation in JavaScript. As well as, discussed all validation topics in the above section with example. So, if you have any issues with the code drop your queries on the comment section.
Similarly, you must learn relative main basic topic jquery hasclass in this link have javascript advance event function find it code apply your project.
Thank you for the auspicious writeup. It actually was a amusement account it.
Look complicated to more delivered agreeable from you!
By the way, how could we be in contact?
Sure…
Hi there, I discovered your site by way of Google at the same
time as looking for a similar topic, your web site got here up, it looks good.
I have bookmarked it in my google bookmarks.
Hello there, simply become alert to your blog through
Google, and found that it is truly informative.
I’m gonna be careful for brussels. I will appreciate should you continue this in future.
Many people will likely be benefited from your writing.
Cheers!더킹카지노
Very good info. Lucky me I discovered your blog by accident.
I have book-marked it for later!
Great site to review. Worth the time. Do YOU know a College Student? More assistance with their class assignments needed than ever before. Tell them about Essays Unlimited. They can solve this problem.
sure dear
Hola! I’ve been following your site for some time now and finally
got the courage to go ahead and give you a shout
out from Atascocita Texas! Just wanted to tell you keep up the excellent job!
Hi there, I discovered your web site by the use of Google even as searching for a comparable matter, your site came up,
it seems good. I have bookmarked it in my
google bookmarks.
Hello there, just was aware of your weblog thru Google, and
found that it is truly informative. I am going to watch out for brussels.
I will appreciate if you proceed this in future. Lots of other people might be
benefited from your writing. Cheers!
Spot on with this write-up, I truly think this website needs much more consideration. I?ll probably be again to read much more, thanks for that info.
Thanks you can see other example of email validation