Help with javascript email validation for two email inputs

JavaScript
1

I have an assignment where I have to validate email (in an html form) with javascript, without using jquery or any libraries. The form has two email inputs so that the user has to enter their email twice, and that’s what’s confusing me. The email validation function is this:

function validEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;     
	return re.test(email); 
}

And I’m not allowed to modify that function. This is the javascript that I have:

// email function
function validEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\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,}))$/;     
	return re.test(email); 
}
	
function validate() {	
	
    var errorMessage = "";
	// declare email variable for both email id's
    var email = document.querySelectorAll("emailaddress, emailconfirmation"); 
    // declare the rest of the variables
    var nameInput = document.getElementById("fullname");
	var emailInput = document.getElementById("emailaddress");
	var emailInputConfirm = document.getElementById("emailconfirmation");
	var formSubject = document.getElementById("formsubject");
	var formMessage = document.getElementById("formmessage");
    // trim strings
    var name = nameInput.value.trim();
	var email = emailInput.value.trim();
	var emailconfirm = emailInputConfirm.value.trim();
	var subject = formSubject.value.trim();
	var message = formMessage.value.trim();
    // put trimmed versions back into the form
    nameInput.value = name;
	emailInput.value = email;
	emailInputConfirm.value = emailconfirm;
	formSubject.value = subject;
	formMessage.value = message;
	
		// if statement to test email
		if (!validEmail(email)){
		errorMessage += "Email is invalid.<br>";
	}
    // make sure inputs aren't empty
    if (name === "") {
        errorMessage += "Name cannot be empty.<br>";
    }
    if (email === "") {
        errorMessage += "First email address cannot be empty.<br>";
    }
	if (emailconfirm === "") {
        errorMessage += "Second email address cannot be empty.<br>";
    }
    if (subject === "") {
        errorMessage += "Subject cannot be empty.<br>";
    }
	if (message === "") {
        errorMessage += "Message cannot be empty.<br>";
    }
	
    return errorMessage;

}
 
var sendBtn = document.getElementById("names-send");
sendBtn.onclick = function () {
var msgArea = document.getElementById("msg");
var msg = validate();

    if (msg === "") {
        clearForm();
        msgArea.innerHTML = "Sent!";
        return true;
    } else {
        msgArea.innerHTML = msg;
        return false;
    }
};

And this is my HTML form:

<h1>Contact form</h1>
	  <div class="form-container">
            <div id="msg">
                <br>
            </div>
	        <div id="form-div">
            <form id="names-form" name="names-form">
				<div class="input-div">
                    <input type="text" class="form-input" id="fullname" name="name" placeholder="Full name" maxlength="64" value="">
				</div>
				<div class="input-div">
				    <input type="text" class="form-input" id="emailaddress" name="email" placeholder="Email address" maxlength="64" value="">
               </div>
			   <div class="input-div">
				    <input type="text" class="form-input" id="emailconfirmation" name="emailconfirm" placeholder="Re-enter email address" maxlength="64" value="">
               </div>
			   <div class="input-div">
				    <input type="text" class="form-input" id="formsubject" name="subject" placeholder="Subject" maxlength="64" value="">
               </div>
               <textarea class="form-input" id="formmessage" name="message" placeholder="Message" maxlength="1000"></textarea>
                <button id="names-send" type="button" class="">Send</button>
                <button id="names-clear" type="button" class="">Clear</button>
            </form> 
		 </div>
	</div>

I’ve tried the javascript if statement several different ways but my problem is that if the user enters a valid email for the first email input, it stops checking, so the second email input will be allowed, whatever it is. How do I get it to check not just the first but the second email input too? Any help is greatly appreciated.

3

How do I do that and have it check my two separate email inputs? For example, if I just take this

if (!validEmail(email)){
		errorMessage += "Email is invalid.<br>";
	}

and copy and paste so that it’s there twice, it still does the same behavior where it doesn’t check the second email input. I don’t know how to tell it to check both “emailaddress” and “emailconfirmation” which are both assigned to the “email” variable.

4

You do not have an emailaddress variable. You do have email and emailconfirm variables. You need to call the function with each of these variables as an argument.

1 Like