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

I did for email you can do it for the rest by learning regex: REGEX tutorial

HTML

<div class="contact-col">
  <form name="form1" action="#">
    <input type='text' name='text1' />
    <input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)" />
  </form>
</div>

CSS

.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;
}

JS

function ValidateEmail(inputText) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputText.value.match(mailformat)) {
    alert("Valid email address!");
    document.form1.text1.focus();
    return true;
  } else {
    alert("You have entered an invalid email address!");
    document.form1.text1.focus();
    return false;
  }
}

my Fiddle

This is how I do in React js

const validateForm = () => {
    let errorFlag = false;
            
    const atposition = email.trim().indexOf('@');
    const dotposition = email.trim().lastIndexOf('.');
    if(atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.trim().length) {
        setemailError('Please enter a valid email Id');
        errorFlag = true;
    }

    if (errorFlag) {
        throw new Error('Form validation failed');
    }
}

Specifically, try out the regex part of the above code. Hope it's helpful.