37 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
			
		
		
	
	
			37 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
| "uses strict";
 | |
| 
 | |
| const emailForm = document.getElementById("email-form");
 | |
| const emailInput = document.getElementById("email");
 | |
| const errorMessage = document.getElementById("errorMessage");
 | |
| 
 | |
| emailForm.addEventListener("submit", checkEmailValidity, false);
 | |
| emailInput.addEventListener("focus", inputFocused, false);
 | |
| 
 | |
| /**
 | |
|  * @param   {[Event]}  event
 | |
|  */
 | |
| function checkEmailValidity(event) {
 | |
|     if (emailForm.checkValidity() === false) {
 | |
|         event.preventDefault();
 | |
|         emailInput.classList.add("error-border");
 | |
|         errorMessage.classList.add("error-visible");
 | |
|     } else {
 | |
|         emailInput.classList.remove("error-border");
 | |
|         errorMessage.classList.remove("error-visible");
 | |
|     }
 | |
| }
 | |
| 
 | |
| // When an input has focus I remove the error state,
 | |
| function inputFocused(event) {
 | |
|     /**
 | |
|      * Just for VS Code intellisense
 | |
|      *
 | |
|      * @type {HTMLInputElement}
 | |
|      */
 | |
|     const input = event.currentTarget;
 | |
|     if (input.classList.contains("error-border")) {
 | |
|         input.classList.remove("error-border");
 | |
|         errorMessage.classList.remove("error-visible");
 | |
|     }
 | |
| }
 |