Using JavaScript how do I validate my email

JavaScript
1

Hi, right now I have it that an email is put into the function and it adds a paragraph saying if it is valid or not.
what I need to do is add a text box that someone would type their email into and then the background of the textbox would go transparent if the email is valid and the background would go red if it is not a valid email. I need to do this by using the addEventListener blur event. I’m not sure if I’m close?

<!Doctype html>
<html>
<!--Header-->
<head>	
    <title>JavaScript</title>
    <!--can contain javascript imports but page javascipt should be at the bottom of the body-->
</head>
<!--Body-->
<body>
 
<!---- Email Html--->
<h4>Email Validation!</h4>
	<label for="inputEmail">Enter your email:</label>
	<input type="email" id="emailInput" name="email">

<!--javascript code-->

<script type="text/javascript">

		function validateEmail(email, emailPattern){

	    emailPattern = (emailPattern instanceof RegExp) ?  emailPattern : /[\w-\.]+@([\w-]+\.)+[\w-]{2,4}/;
        var matchResults = emailPattern.test(email);
		var message  =  matchResults  ? 'Your Email is Valid' : 'Your Email is Invalid' ;
		var emailParagraph = document.createElement("p");
		document.body.appendChild(emailParagraph);
		emailParagraph.appendChild(document.createTextNode(message));
		return matchResults;
}		
validateEmail('emailImput');
	
document.addEventListener("blur", function(validateEmail){ validateEmail.target.style.backgroundColor = "transparent";});

</script>
<!--end of scripts-->


</body>
</html>
2

Hi @jlusty, with this line you’re always setting the background colour to transparent when a blur event occurs; the actual validateEmail() function is only called once initially. When using an <input type="email"> though, you can actually use the intrinsic constraint validation API to check if the entered value is a valid email address:

<input type="email" id="email">

var email = document.getElementById('email')

email.addEventListener('blur', function (event) {
  event.target.style.backgroundColor = event.target.validity.valid
    ? 'transparent'
    : 'red'
})
1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.