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

Answer 2

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

Answer 3

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.