Regular expression /^\S+@\S+$/ in Javascript not working

Question

I'm trying to use javascript regular expressions for my email input area. I've tried each of the following:

/^\S+@\S+$/

/\S+@\S+\.\S+/

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

Neither of them work, and every other input field works fine. Here is my Javascript and html:

function checkForm(){
  var isValid = true;
  var name = document.forms['contact']['name'].value;
  var email = document.forms['contact']['email'].value;
  var emailpattern = /^\S+@\S+$/;
  var subject = document.forms["contact"]["subject"].value;
  var textarea = document.forms["contact"]["textarea"].value;

if(name == ""){
  document.getElementById('nameMessage').innerHTML = "please enter a name";
  isValid = false;
} else {
  document.getElementById('nameMessage').style.display = "none";
}

if(!emailpattern.test(emailMessage)){
  document.getElementById('emailMessage').innerHTML = "please enter a valid email";
  isValid = false;
}
else {
  document.getElementById('emailMessage').style.display = "none";
}

<form action="thankyou.html" id="contactId"name="contact" onsubmit="return checkForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <p id="nameMessage"></p>

  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <p id="emailMessage"></p>
  
  
  <div><button type="submit" id="submit">Submit</button></div>

Does this answer your question? [How to validate an email address in JavaScript](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Vikas Keskar, May 16 '20 at 01:53

score 0 · Accepted Answer · answered May 16 '20 at 02:12

You are using emailMessage wrong variable to test regex use email and also you have to return false if any validation fails to prevent form from submitting.

function checkForm(){
  var isValid = true;
  var name = document.forms['contact']['name'].value;
  var email = document.forms['contact']['email'].value;
  var emailpattern = /^\S+@\S+$/;

if(name == ""){
  document.getElementById('nameMessage').innerHTML = "please enter a name";
  isValid = false;
  return false;
} else {
  document.getElementById('nameMessage').style.display = "none";
}

if(!emailpattern.test(emailMessage)){
  document.getElementById('emailMessage').innerHTML = "please enter a valid email";
  isValid = false;
  return false;
}
else {
  document.getElementById('emailMessage').style.display = "none";
}
}

<form action="thankyou.html" id="contactId"name="contact" onsubmit="return checkForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <p id="nameMessage"></p>

  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <p id="emailMessage"></p>
  
  
  <div><button type="submit" id="submit">Submit</button></div>
</form>

Regular expression /^\S+@\S+$/ in Javascript not working

1 Answers1