add E-mail validation and character limit using js

Question

So I am new to code java script, learning actually and came across this thing validation. During Form Validation I was able to validate the name, subject and message but didn't understand how I can validate email. Tried doing it and learning but didn't workout well. Also If there is any way of setting minimum word limit instead of minimum character limit in the message box please do help with that too. Thanks in advance

const name = document.getElementById("fname");
const message = document.getElementById("message");
const sub = document.getElementById("subject")

function validate() {
  var isError = false;
  var errMessage = '';
  if (name.value === "" || name.value == null) {
    isError = true;
    errMessage += "Please Enter Your Name\n";
  }
  if (sub.value === "" || sub.value == null) {
    isError = true;
    errMessage += "Please Enter a Subject\n";
  }
  if (message.value < 40) {
    isError = true;
    errMessage += "Your Message Should be Longer";
  }
  if (isError) {
    alert(errMessage);
    return false;
  } else {
    return true;
  }
}

.contact-col {
  flex-basis: 48%;
  margin-bottom: 30px;
}

.contact-col div {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.contact-col div .fa {
  font-size: 28px;
  color: #f7a335;
  margin: 10px;
  margin-right: 30px;
}

.contact-col div p {
  padding: 0;
}

.contact-col div h5 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #555;
  font-weight: 400;
}

.contact-col input,
.contact-col textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 17px;
  outline: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.red-btn {
  display: inline-block;
  text-decoration: none;
  color: #f7a335;
  border: 1px solid #f7a335;
  padding: 12px 34px;
  font-size: 13px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.red-btn:hover {
  color: #fff;
  border: solid#f7a335;
  background: #f7a335;
  transition: 1s;
}

<div class="contact-col">
  <form onsubmit="return validate()">
    <input type="text" placeholder="Enter Your Name" id="fname">
    <input type="email" placeholder="Enter E-mail ID">
    <input type="text" placeholder="Enter Your Subject" id="subject">
    <textarea rows="8" placeholder="Message" id="message"></textarea>
    <button type="submit" class="red-btn">Send Message</button>
  </form>
</div>

Answer 1

Hi i found a help for you.

You can do the matching with RegExp.

Here is my own RegExp:

/.*\@.*\.\w{2,3}/g

Here is an RegExp i found on internet:

/^(([^<>()[\]\\.,;:\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,}))$/

And this is your code to test:

const name = document.getElementById("fname");
const message = document.getElementById("message");
const sub = document.getElementById("subject");
const email = document.getElementById("email")

function validate() {
  var isError = false;
  var errMessage = '';
  if (name.value === "" || name.value == null) {
    isError = true;
    errMessage += "Please Enter Your Name\n";
  }
  if (sub.value === "" || sub.value == null) {
    isError = true;
    errMessage += "Please Enter a Subject\n";
  }
  if (message.value < 40) {
    isError = true;
    errMessage += "Your Message Should be Longer\n";
  }
  console.log(email.value.match(/.*\@.*\.\w{2,3}/g))
  if (email.value === "" || email.value.match(/.*\@.*\.\w{2,3}/g) === null){
    isError = true;
    errMessage += "Please Enter a Valid Email";
  }
  if (isError) {
    alert(errMessage);
    return false;
  } else {
    return true;
  }
}

.contact-col {
    flex-basis: 48%;
    margin-bottom: 30px;
  }
  
  .contact-col div {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }
  
  .contact-col div .fa {
    font-size: 28px;
    color: #f7a335;
    margin: 10px;
    margin-right: 30px;
  }
  
  .contact-col div p {
    padding: 0;
  }
  
  .contact-col div h5 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400;
  }
  
  .contact-col input,
  .contact-col textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  .red-btn {
    display: inline-block;
    text-decoration: none;
    color: #f7a335;
    border: 1px solid #f7a335;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
  }
  
  .red-btn:hover {
    color: #fff;
    border: solid#f7a335;
    background: #f7a335;
    transition: 1s;
  }

    <div class="contact-col">
      <form onsubmit="return validate()">
        <input type="text" placeholder="Enter Your Name" id="fname">
        <input type="text" placeholder="Enter E-mail ID" id="email">
        <input type="text" placeholder="Enter Your Subject" id="subject">
        <textarea rows="8" placeholder="Message" id="message"></textarea>
        <button type="submit" class="red-btn">Send Message</button>
      </form>
    </div>

Notice: I change type of input of the email to text to test the validation