How to check whether an email address contains an @ sign and a '.'. in html and javascript

Question

I'm performing some validation checks on some inputs from the user. I was wondering how do I check that the email entered by the user contains an @ symbol and a '.' as well as characters before and after the @ symbol. Thanks in advance for answering.

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
    function showInput() {
      var comment = document.getElementById("com").value;
      var first = document.getElementById("fname").value;
      var last = document.getElementById("lname").value;
      var dateOfVisit = document.getElementById("date").value;
      var firstError = document.getElementById('firstNameError');
      var lastError = document.getElementById('lastNameError');
      var displayEl = document.getElementById('displayname');

      if (!first) {
        firstError.setAttribute('style', 'display: block; color: red');
      } else {
        firstError.setAttribute('style', 'display: none;');
      }
      if (!last) {
        lastError.setAttribute('style', 'display: block; color: red');
      } else {
        lastError.setAttribute('style', 'display: none;');
      }
      displayEl.innerHTML = 
        first + " " + last + " visited this on " + dateOfVisit + " and said '" + comment || 'not a thing...' + "'";
    }   
</script>

<title>Great Pyramid of Giza</title>

</head>

<body>

<h2>Leave A Review!</h2>
<p>Have you been to this wonder of the world? If so, leave a review.</p>
<form>
  First Name:<br>
  <input type = "text" name="firstname" id="fname"><br>
  <span style="display: none;" id="firstNameError">First name is required!</span>
  Last Name:<br>
  <input type = "text" name="lastname" id="lname"><br>
  <span style="display: none;" id="lastNameError">Last name is required!</span>
  Email Address:<br>
  <input type = "text" name="email"><br>
  Date of Visit:<br>
  <input type = "text" name="date" id="date"><br>
  Comment:<br>
  <input type = "text" name="comment" size="70" id="com"><br>
</form> 

<input type = "submit" value="Submit" onclick="showInput();">
<h2>Comments:</h2>
<p><span id='displayname'></span></p>


</body>

</html>

Possible duplicate of [How to validate an email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Siraj K, Apr 18 '18 at 21:36

score 1 · Accepted Answer · answered Apr 21 '18 at 21:07

You can create a email input and validate against that instead of using any regex...

function isEmail(email) {
  var input = document.createElement('input')
  input.type = 'email'
  input.value = email
  return input.validity.valid
}

console.log(isEmail('admin@example.com'))
console.log(isEmail('@example.com'))

But why bother??? just use <input type="email"> and skip all javascript nonsens

<form>
  <input type="text" name="firstname" required autocomplete="given-name">
  <input type="text" name="lastname" required autocomplete="family-name">
  <input type="email" name="email" autocomplete="email">
  <input type="date" min="2018-04-21" name="date">
  <textarea name="comment"></textarea>
  <input type="submit">
</form>

ps, use form.onsubmit instead of btn.onclick (way better)

read more about constraint validation and inputs

How to check whether an email address contains an @ sign and a '.'. in html and javascript

1 Answers1