Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript Program to Check If Email Address is Valid or Not in Browser Using HTML5 Form

Posted on January 14, 2023

 

 

 

SOURCE CODE

 

 

You can use the pattern attribute in an HTML5 input field to validate an email address. Here is an example:

 

 

1
2
3
4
5
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
  <input type="submit" value="Submit">
</form>

 

 

This will require the user to enter a value that matches the regular expression [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$ in the input field. The required attribute ensures that the user must enter a value.

You can also use javascript to validate the email, Here is an example:

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
function validateEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}
 
if(validateEmail(email.value)) {
  alert("Email is valid");
} else {
  alert("Email is not valid");
}

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme